在我的页面中,我希望人们添加关注者或取消关注作者,因此我将两种类型的addgzremovegz添加到按钮中,以执行不同的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返回数据,它执行与上一课相同的操作,
例如,如果该按钮为跟随按钮,则人们单击它,然后将按钮更改为取消关注,是的,此人现在跟随作者,但是,如果他再次单击该按钮,则没有任何变化,该按钮不会变回跟随,并且他仍在关注该作者。

看起来按钮单击只起作用一次,你能告诉我为什么吗?

最佳答案

由于第二个元素是动态创建的,因此应使用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>');

        }
    })
});


事件委托使您可以将单个事件侦听器附加到父元素,该元素将为与选择器匹配的所有子对象触发,无论这些子对象现在存在还是将来添加。

10-05 20:31
查看更多