javascript - attr() 不会更改 id - jquery

Question

我想在每次点击div后更改它的id。但 .attr() 仅在第一次单击后更改一次。

$(function(){
  $('#m1').click(function(e){
    e.preventDefault();
    $('#m1').attr("id","m11");
    $('#m11').after('<div id="info_cont1">Hello m11 </div>');
  });

  $('#m11').click(function(e){
    e.preventDefault();
    $('#m11').attr("id","m1");
    $('#m1').after('<div id="info_cont1">Hello m1 </div>');
  });

});

对这种行为有什么想法吗？

Answer 1

这是因为您将第二个 .click 函数绑定(bind)到当时不存在的元素 #m11，但代码在早期运行。因此，使用委托(delegate):

$(document).on('click', '#m11', function(event) {
    // code
});

所以完整的代码是:

$(function(){
    // you could actually also use .on() here :)
    $(document).on('click', '#m1', function(e) {
        e.preventDefault();
        $('#m1').attr("id","m11");
        $('#m11').after('<div id="info_cont1">Hello m11 </div>');
    });

    $(document).on('click', '#m11', function(e) {
        e.preventDefault();
        $('#m11').attr("id","m1");
        $('#m1').after('<div id="info_cont1">Hello m1 </div>');
    });

});