javascript - 为什么我的 jquery on handler 只工作一次

Question

在我的页面中，我希望人们添加关注或取消关注作者，因此我向按钮添加了两种类 addgz 和 removegz 来执行 ajax 不同操作。

这是代码

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

这是为了跟随

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

这是jquery代码

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

        }
    })
});

现在的问题是，它只能工作一次，这意味着，我单击按钮，它更改了类，将关注更改为取消关注。但然后我再次单击按钮，它没有变回来，并且ajax返回数据显示，它执行与上一个类相同的操作，例如，如果按钮是关注，人们点击它，然后按钮更改为取消关注，是的，这个人现在关注作者，但是，如果他再次点击该按钮，没有任何变化，按钮没有变回关注，他仍在关注该作者。

看起来这个按钮只能点击一次，你能告诉我为什么吗？

Answer 1

由于您的第二个元素是动态创建的，因此您应该使用 event delegation用于绑定(bind)事件

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

        }
    })
});

事件委托(delegate)允许您将单个事件监听器附加到父元素，该事件监听器将为匹配选择器的所有子元素触发，无论这些子元素现在存在还是将来添加。