Question

当用户点击取消关注按钮并成功结束请求时，我将我的按钮更改为关注按钮，它仍然会听取取消关注功能!!见下面的代码

    $(document).ready(function() {
     $("button[data-follow]").on("click",function(){

 var id = $(this).attr("data-follow");
 $.ajax({
     data: {followid : id  } ,
     url:"follow.php",
     type:"POST",
     datatype: "json",
     success: function(data){
         alert(data);
        $(this).css({"background" : "green"});



     }
 });});





 $("button[data-unfollow]").on("click",function(){
 var there = $(this);
 var id = there.attr("data-unfollow");
  $.ajax({
     data: {followid : id  } ,
     url:"unfollow.php",
     type:"POST",
     success: function(data){
         alert(data);
        there.text("follow");
        there.attr("data-follow","1234");



     }
 });



    });

      });

当我点击它跟随它应该发送请求跟随网址但它仍然发送到取消关注!!

Answer 1

你必须删除像这样的ajax响应中的'data-unfollow'属性，

$("button[data-unfollow]").on("click",function(){
  var there = $(this);
  var id = there.attr("data-unfollow");
  $.ajax({
     data: {followid : id  } ,
     url:"unfollow.php",
     type:"POST",
     success: function(data){
       alert(data);
       there.text("follow");
       there.attr("data-follow","1234");
       there.removeAttr('data-unfollow'); // try removing the data-unfollow attribute
    }
});

<强> :::::::::::::::::::::::::::: EDIT ::::::::::::::: ::::::::::::::

将您的第一行JS代码更改为它的工作......

 $(document).on("click","button[data-follow]",function(){

和

 $(document).on("click","button[data-unfollow]",function(){

并且不要忘记也使用.removeAttr（）。

Answer 2

使用.prop api添加属性和.removeProp api以删除属性

 $(function(){

        $('button').on('click',function(e){
            $(this).removeProp('data-unfollow');
            $(this).prop('data-follow','Ok');
             alert($(this).prop('data-follow'));
        });

    });

希望它有所帮助...

Answer 3

通常使用委托事件绑定，您希望父级参数中包含选择器。

e.g。

$("#your parent div").on("click", "button[data-follow]", function () 
{ function contents here });

这是因为父母需要注意DOM的变化。

jquery点击事件重复

3 个答案: