2 jQuery AJAX post req与同一个对象
我想要做的是这样的：
<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要求完美，但第二个要求不是。 当我按下button，价值不会改变，我没有收到通讯员发布要求/unfollow 。 这里有什么问题？
感谢提前！
您的事件绑定发生在DOM第一次加载时。 当您dynamic更改ID时，不会导致绑定更改。 您需要使用on()进行委托才能正常工作。
$(".btn").on("click", "#follow", function() {...}); $(".btn").on("click", "#unfollow", function() {...});
另一个select是不改变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'); } }); });
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"); }); });
这是在Jsfiddle
改变ID不是一个好主意。
您可以通过保持id相同来获得正确的效果，并在单个点击处理程序中testingvalue ，如下所示：
$('#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值的语句。 否则，button的值将至less在一段时间内说谎，或者如果发生ajax错误，则会持续更长的时间。