jquery - 2 JQuery AJAX post req 具有相同的对象

Question

确切地说，我想做的是:

<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 的相应帖子请求。这里有什么问题吗？

提前致谢!

Answer 1

您的事件绑定(bind)在 DOM 首次加载时发生。当您动态更改 ID 时，不会导致绑定(bind)发生更改。您需要使用 on() 进行委托(delegate)才能使其正常工作。

$(".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');
        }
    });
});