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

attr（）不会更改id - jquery

2 个答案: