确切地说,我想做的是:

<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');
        }
    });
});

10-08 11:47