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 函数绑定到当时不存在的元素 #m11，但代码在那个早期点运行。因此，使用委托：

$(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>');
    });

});

Answer 2

当您使用该click方法时，它是在脚本执行的最开始使用的，当时m11不存在。

如果您只是想在 id 之间切换m1，m11然后执行以下操作：

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