Javascript 为什么处理程序上的jquery只工作一次

在我的页面中，我希望人们添加跟随作者或不跟随作者，因此我在按钮中添加了两种类class

addgz

和

removegz

，以实现不同的操作

这是密码

<li><a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a></li>

这是给你的

<li><a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a></li>

这是jquery代码

$(".addgz").on("click",function(){
    var elm=$(this);
    $.ajax({
        url:"/addgz/{{post.author.id}}/",
        type:"post",
        dataType:"json",
        success:function(msg){

            elm.parent().html('<a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a>');

        }
    })
} );


$(".removegz").on("click",function(){
    var elm=$(this);
    $.ajax({
        url:"/removegz/{{post.author.id}}/",
        type:"post",
        dataType:"json",
        success:function(msg){

            elm.parent().html('<a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a>');

        }
    })
});

$（.addgz”）。在（“单击”，函数（）{
var elm=$（本）；
$.ajax({
url:“/addgz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
} );
$（.removegz”）。在（“单击”，函数（）{
var elm=$（本）；
$.ajax({
url:“/removegz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});

现在的问题是，它只工作一次，这意味着，我点击按钮，它改变了类，改变跟随以取消跟随。但是，我再次单击按钮，它不会更改回，ajax返回数据显示，它执行与前一个类相同的操作， 例如，如果按钮是跟随，人们单击它，然后按钮变为不跟随，是的，这些人现在跟随作者，但是，如果他再次单击按钮，没有任何变化，按钮不会变回跟随，他仍然跟随作者

---

看起来这个按钮只能点击一次，你能告诉我为什么吗

因为第二个元素是动态创建的，所以应该使用

$(document).on("click", ".removegz", function () {
  var elm = $(this);
  $.ajax({
      url: "/removegz/{{post.author.id}}/",
      type: "post",
      dataType: "json",
      success: function (msg) {

          elm.parent().html('<a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a>');

      }
  })
 });


$(document).on("click", ".addgz", function () {
    var elm = $(this);
    $.ajax({
        url: "/addgz/{{post.author.id}}/",
        type: "post",
        dataType: "json",
        success: function (msg) {

            elm.parent().html('<a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a>');

        }
    })
});

$（文档）。在（“单击”、“.removegz”上，函数（）{
var elm=$（本）；
$.ajax({
url:“/removegz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});
$（document）.on（“click”，“.addgz”，函数（）{
var elm=$（本）；
$.ajax({
url:“/addgz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});

---

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

由于第二个元素是动态创建的，您应该使用它绑定事件

$(document).on("click", ".removegz", function () {
  var elm = $(this);
  $.ajax({
      url: "/removegz/{{post.author.id}}/",
      type: "post",
      dataType: "json",
      success: function (msg) {

          elm.parent().html('<a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a>');

      }
  })
 });


$(document).on("click", ".addgz", function () {
    var elm = $(this);
    $.ajax({
        url: "/addgz/{{post.author.id}}/",
        type: "post",
        dataType: "json",
        success: function (msg) {

            elm.parent().html('<a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a>');

        }
    })
});

$（文档）。在（“单击”、“.removegz”上，函数（）{
var elm=$（本）；
$.ajax({
url:“/removegz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});
$（document）.on（“click”，“.addgz”，函数（）{
var elm=$（本）；
$.ajax({
url:“/addgz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});

---

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

由于第二个元素是动态创建的，您应该使用它绑定事件

$(document).on("click", ".removegz", function () {
  var elm = $(this);
  $.ajax({
      url: "/removegz/{{post.author.id}}/",
      type: "post",
      dataType: "json",
      success: function (msg) {

          elm.parent().html('<a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a>');

      }
  })
 });


$(document).on("click", ".addgz", function () {
    var elm = $(this);
    $.ajax({
        url: "/addgz/{{post.author.id}}/",
        type: "post",
        dataType: "json",
        success: function (msg) {

            elm.parent().html('<a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a>');

        }
    })
});

$（文档）。在（“单击”、“.removegz”上，函数（）{
var elm=$（本）；
$.ajax({
url:“/removegz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});
$（document）.on（“click”，“.addgz”，函数（）{
var elm=$（本）；
$.ajax({
url:“/addgz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});

---

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

由于第二个元素是动态创建的，您应该使用它绑定事件

$(document).on("click", ".removegz", function () {
  var elm = $(this);
  $.ajax({
      url: "/removegz/{{post.author.id}}/",
      type: "post",
      dataType: "json",
      success: function (msg) {

          elm.parent().html('<a href="javascript:;" class="btn_celadon addgz"><span><i class="icon_add "></i>follow</span></a>');

      }
  })
 });


$(document).on("click", ".addgz", function () {
    var elm = $(this);
    $.ajax({
        url: "/addgz/{{post.author.id}}/",
        type: "post",
        dataType: "json",
        success: function (msg) {

            elm.parent().html('<a href="javascript:;" class="btn_celadon removegz"><span>unfollow</span></a>');

        }
    })
});

$（文档）。在（“单击”、“.removegz”上，函数（）{
var elm=$（本）；
$.ajax({
url:“/removegz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});
$（document）.on（“click”，“.addgz”，函数（）{
var elm=$（本）；
$.ajax({
url:“/addgz/{{post.author.id}}/”，
类型：“post”，
数据类型：“json”，
成功：功能（msg）{
elm.parent（）.html（“”）；
}
})
});

---

事件委派允许您将单个事件监听器附加到父元素，该监听器将为与选择器匹配的所有子元素触发，无论这些子元素现在存在还是将来添加。

在加载DOM后创建新元素时，最好委派到文档，尤其是在ajax情况下

 $(document).on("click",".addgz", function(){
  //your code goes here
 });

 $(document).on("click",".removegz", function(){
       //your code goes here
 });

---

最好在加载DOM后创建新元素时委托给文档，特别是在ajax情况下

 $(document).on("click",".addgz", function(){
  //your code goes here
 });

 $(document).on("click",".removegz", function(){
       //your code goes here
 });

---

最好在加载DOM后创建新元素时委托给文档，特别是在ajax情况下

 $(document).on("click",".addgz", function(){
  //your code goes here
 });

 $(document).on("click",".removegz", function(){
       //your code goes here
 });

---

最好在加载DOM后创建新元素时委托给文档，特别是在ajax情况下

 $(document).on("click",".addgz", function(){
  //your code goes here
 });

 $(document).on("click",".removegz", function(){
       //your code goes here
 });