在我的页面中,我希望人们添加关注或取消关注作者,因此我向按钮添加了两种类 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用于绑定(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)允许您将单个事件监听器附加到父元素,该事件监听器将为匹配选择器的所有子元素触发,无论这些子元素现在存在还是将来添加。
关于javascript - 为什么我的 jquery on handler 只工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22814921/