确切地说,我想做的是:
<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>
第一个要求很完美,但是第二个要求却没有。当我按下按钮时,该值不会更改,并且不会收到
/unfollow
的相应邮寄要求。这是什么问题谢谢前进!
最佳答案
事件绑定在首次加载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');
}
});
});