Javascript Ajax只被调用一次

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

现在，当您单击“跟踪”时，数据库将更新，“跟踪”按钮消失，“取消跟踪”按钮出现。问题是，如果我再次单击“取消跟踪”按钮，什么也不会发生。即使我放了一个console.log（'test'）；在脚本的顶部，没有任何功能。这是我的密码：

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

    });    

});

<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>

$（文档）.ready（函数（）{
console.log（'test'）；
$（'.follow'）。单击（函数（）{
console.log（'yes'）；
var userid=$（this.attr（“id”）；
var dataString='id='+userid；
var self=这个；
$.ajax({
类型：“POST”，
url:“/ajax/follow”，
数据：dataString，
成功：功能（结果）{
var json=$.parseJSON（结果）；
$（self.remove（）；
$（'followButton'）。附加（
$('')
);
}
});
});
$（'.unfollow'）。单击（函数（）{
console.log（'no'）；
var id=$（this.attr（“id”）；
var dataString='id='+id；
var self=这个；
$.ajax({
类型：“POST”，
url:“/ajax/unfollow”，
数据：dataString，
成功：函数（结果）{
$（self.remove（）；
$（'followButton'）。附加（
$('')
);
}
});           
});    
});

HTML:

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

    });    

});

<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>

跟随按钮：

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

    });    

});

<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>

取消跟踪按钮：

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

    });    

});

<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>

---

因为您的按钮是通过AJAX调用动态添加到DOM中的。您需要使用在这些元素上附加单击事件：

事件委派允许我们将单个事件侦听器附加到 父元素，将为与选择器匹配的所有子元素激发， 无论这些孩子现在存在还是将来被添加

---

因为按钮是通过AJAX调用动态添加到DOM中的。您需要使用在这些元素上附加单击事件：

事件委派允许我们将单个事件侦听器附加到 父元素，将为与选择器匹配的所有子元素激发， 无论这些孩子现在存在还是将来被添加

---

$（self.remove（）已删除该元素。当然，不会再次触发该事件。
$（self.remove（）已删除该元素。当然，该事件不会再次触发。+1，太快了。他也应该对follow做同样的操作。OP应该选择一个静态父对象，它比要将事件附加到的
文档
对象更靠近follow和unfollow按钮。+1，这很快。他也应该对follow执行同样的操作。OP应该选择一个静态父对象，它比要将事件附加到的
文档
对象更靠近follow和unfollow按钮。