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来绑定事件

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

        }
    })
});

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

Answer 2

最好在加载DOM后创建新元素时委托给文档，尤其是在ajax情况下

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

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

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

2 个答案: