Question

我有一个关注和取消关注按钮。当然，当您单击“关注”按钮时，应显示取消关注按钮。单击“关注”按钮时，应显示“取消关注”按钮。

截至目前，当您点击＆＃34;关注＆＃34;时，数据库会更新，＆＃34;关注＆＃34;按钮消失，＆＃34;取消关注＆＃34;按钮出现。问题是，如果我点击＆＃34;取消关注＆＃34;再次按钮，没有任何反应。即使我放了一个console.log（＆＃39; test＆＃39;）;在脚本的顶部，没有任何作用。这是我的代码：

使用Javascript：

$(document).ready(function(){
    console.log('test');

    $('.follow').click(function(){
        console.log('yes');
            var userid = $(this).attr("id");
            var dataString = 'id='+ userid ;
            var self = this;                
              $.ajax({
                    type: "POST",
                    url: "/ajax/follow",
                    data: dataString,
                    success: function(result) {
                        var json = $.parseJSON(result);
                            $(self).remove();
                        $('#followButton').append(                                     
                     $('<a href="#" class="button unfollow" id="unfollow_'+ json +'">- unfollow</a>')
                );
                }
              });
    });
    $('.unfollow').click(function(){
        console.log('no');
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var self = this;            
        $.ajax({
                type: "POST",
                url: "/ajax/unfollow",
                data: dataString,
                success: function(result) {    
                    $(self).remove();                       
                    $('#followButton').append(                                     
                $('<a href="#" class="button follow" id="'+ result +'">+ follow</a>')
                 );
               }
          });           

    });    

});

HTML：

关注按钮：

<div id="followButton">                 
  <a href="#" class="button follow" id="0-p-0">+ follow</a>
</div>

取消关注按钮：

<div id="followButton">
        <a href="#" class="button unfollow" id="unfollow_0">- unfollow</a></div>

Answer 1

由于您的按钮已通过AJAX调用动态添加到DOM中。您需要使用 event delegation 在这些元素上附加点击事件：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$(document).on('click','.unfollow', function(){
    // Your code here
});

Ajax只被调用一次

1 个答案: