why my jquery on handler only works once

Question

In my page, I want people add follow or unfollow the author, so I add two kinds class addgz and removegz to the button for ajax different action.

here is the code

<li><a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a></li>

and this is for follow

<li><a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a></li>

here is the jquery code

$(".addgz").on("click",function(){
    var elm=$(this);
    $.ajax({
        url:"/addgz/{{post.author.id}}/",
        type:"post",
        dataType:"json",
        success:function(msg){

            elm.parent().html('<a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a>');

        }
    })
} );


$(".removegz").on("click",function(){
    var elm=$(this);
    $.ajax({
        url:"/removegz/{{post.author.id}}/",
        type:"post",
        dataType:"json",
        success:function(msg){

            elm.parent().html('<a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a>');

        }
    })
});

now the problem is ,it only work one time ,it means, I click the button, it change the class,change follow to unfollow. but then I click the button again ,it not change back, and the ajax back data show, it do the same action as the previous class, for example, if the button is follow , people click it, then button change to unfollow , and yes this people follow the author now, however, if he click the button again, nothing changes, the button do not change back to follow , and he is still following this author.

looks like the button click only work one time ,can you tell me why?

Answer 1

Since your second element is created dynamically,you should use event delegation for binding the event

$(document).on("click", ".removegz", function () {
  var elm = $(this);
  $.ajax({
      url: "/removegz/{{post.author.id}}/",
      type: "post",
      dataType: "json",
      success: function (msg) {

          elm.parent().html('<a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a>');

      }
  })
 });


$(document).on("click", ".addgz", function () {
    var elm = $(this);
    $.ajax({
        url: "/addgz/{{post.author.id}}/",
        type: "post",
        dataType: "json",
        success: function (msg) {

            elm.parent().html('<a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a>');

        }
    })
});

Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

Answer 2

It is better to delegate to document when you create new element after DOM has been loaded, especially in a ajax situation

 $(document).on("click",".addgz", function(){
  //your code goes here
 });

 $(document).on("click",".removegz", function(){
       //your code goes here
 });