attr（）不会更改ID-jQuery

Question

I want to change id of div after every click on it. But the .attr() change it only once, after first click.

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

});

Any ideas of such behaviour?

Answer 1

This is because you are binding the second .click function to the element #m11 which does not exist at that point, but the code runs at that early point. Therefore, use delegation:

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

SO the full code would be:

$(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

When you use the click method, it is being used at the very beginning of your scripts execution, when m11 doesn't exist.

If you simply want to toggle between id's m1 and m11 then do this:

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