Event has been set up, but the attr id re-call event, failed.

$(function() {

  $("-sharpremove_favorite_btn").click(function (e){

    e.preventDefault();

    $.ajax({
      type: "GET",
      url: ,
      success: function(data){

        $("-sharpremove_favorite_btn").attr("id", "add_favorite_btn");

      }
    });

  });

  $("-sharpadd_favorite_btn").click(function (e){

    e.preventDefault();

    $.ajax({
      type: "GET",
      url: ,
      success: function(data){

        $("-sharpadd_favorite_btn").attr("id", "remove_favorite_btn");
      }
    });

  });

});

are all in the same interview
after add_favorite_btn click, I successfully changed the id property of add_favorite_btn to remove_favorite_btn
. At this time, I was pressing it, according to my idea, I could start remove_favorite_btn event
directly, but it turned out that he was still engaged in add_favorite_btn activities instead of remove_favorite_btn
. How could this happen?


Let's not mention the cause of the jam. First of all, there is something wrong with your idea of dom time binding. After the page loads $('- sharpremove_favorite_btn') and $('- sharpadd_favorite_btn'), the binding of the two click can only be successful, and your second one is not available in the current dom. Then you change the element id, in the first event, but this does not change the click event bound by the dom node. This event is not a mapping relationship.

I think the reason for the jam is that every event is tied to ajax asynchronism, which is caused by you clicking too much.

Menu