2具有相同对象JQuery AJAX post请求
确切地说，我想做的是：
<form>
<input type="button" class="btn btn-warning" id="follow" value="Follow">
</form>
<script type="text/javascript">
$('#follow').click(function(){
$.ajax({
url: '/follow'
, type: 'POST'
, cache: false
, data: { user: '<%= username %>' }
, complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
},
});
$('#follow').attr('value', 'Following');
$('#follow').attr('id', 'unfollow');
});
$('#unfollow').click(function(){
$.ajax({
url: '/unfollow'
, type: 'POST'
, cache: false
, data: { user: '<%= username %>' }
, complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
},
});
$('#follow').attr('value', 'Follow');
$('#follow').attr('id', 'follow');
});
</script>第一个post请求可以很好地工作，但第二个请求就不行了。当我按下按钮时，值不会改变，也不会收到/unfollow的相应post请求。这里有什么问题？
感谢advance！
回答 3
Stack Overflow用户
发布于 2012-12-28 11:31:06
您的事件绑定发生在DOM第一次加载时。当您动态更改ID时，不会导致绑定发生更改。您需要使用on()进行委托，这样才能正常工作。
$(".btn").on("click", "#follow", function() {...});
$(".btn").on("click", "#unfollow", function() {...});另一种选择是不更改ID。使用单个处理程序，检查当前值是"Follow"还是"Unfollow"，并调用相应的URL。
$("#follow").click(function () {
if ($(this).val() == "Follow") {
$(this).val("Unfollow");
var url = "/follow";
} else {
$(this).val("Follow");
var url = "/unfollow";
}
$.ajax( {
url: url
, type: 'POST'
, cache: false
, data: { user: '<%= username %>' }
, complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
}
});
});Stack Overflow用户
发布于 2012-12-28 11:46:40
Barmar是正确的，但您也没有正确引用您的ID。
您正在查找#follow，但您已经将其更改为#unfollow :)
这里有一个你想要做的例子。
$(document).ready( function(){
$("body").on("click", "#follow", function(){
$(this).val("Unfollow");
$(this).attr("id","Unfollow");
});
$("body").on("click", "#Unfollow", function(){
$(this).val("Follow");
$(this).attr("id","follow");
});
});和here it is at Jsfiddle
Stack Overflow用户
发布于 2012-12-28 12:00:35
更改id不是一个好主意。
通过保持id不变，并在单击处理程序中测试value，可以获得正确的效果，如下所示：
$('#follow').on('click', function(){
if(this.value == 'Follow') {
$.ajax({
url: '/follow',
type: 'POST',
cache: false,
data: { user: '<%= username %>' },
complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
}
});
$(this).attr('value', 'Following');
}
else {
$.ajax({
url: '/unfollow',
type: 'POST',
cache: false,
data: { user: '<%= username %>' },
complete: function() {
},
success: function(data) {
},
error: function() {
console.log('process error');
}
});
$(this).attr('value', 'Follow');
}
});根据成功/错误/完成函数的相似程度，您可以将其简化为一个$.ajax()块。
您可能还希望将更改#follow的值的语句移动到成功处理程序中。否则，按钮的值将至少在一段时间内说出谎言，如果发生ajax错误，则会说更长时间的谎言。
https://stackoverflow.com/questions/14064174
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号