在我的页面中,我希望人们添加关注者或取消关注作者,因此我将两种类型的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返回数据,它执行与上一课相同的操作,
例如,如果该按钮为跟随按钮,则人们单击它,然后将按钮更改为取消关注,是的,此人现在跟随作者,但是,如果他再次单击该按钮,则没有任何变化,该按钮不会变回跟随,并且他仍在关注该作者。
看起来按钮单击只起作用一次,你能告诉我为什么吗?
最佳答案
由于第二个元素是动态创建的,因此应使用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>');
}
})
});
事件委托使您可以将单个事件侦听器附加到父元素,该元素将为与选择器匹配的所有子对象触发,无论这些子对象现在存在还是将来添加。