Question

我正在尝试制作一个关注/取消关注按钮。以下按钮工作正常。点击后我将按钮ID更改为“取消关注”，但是当我再次单击该按钮时（当它的ID为“unffollow”时），它就好像它仍然具有“跟随”的ID，这意味着它仍然使用第一个ajax方法如此：

$("#fbtn").on('click',function(){ 
    var fbtn = $('#fbtn');
    var followee_name = $('#author').text();

        $.ajax({
            url: '/follow',
            method: 'POST',
            //dataType: 'application/json',
            data:{followee_name:followee_name},
            success: function(response){ 
            console.log("Followed")
            fbtn.text('Unfollow');
            fbtn.attr('id','unfollow');
            }
        });
});

然后：

$("#unfollow").on('click',function(){ 
    var unfollowbtn = $('#unfollow');
        $.ajax({
            url: '/unfollow',
            method: 'DELETE',
            //dataType: 'application/json',
            success: function(response,err){ 
            if(err){
                console.log(err);
            }
            console.log("Unfollowd")
            unfollowbtn.text('Follow');
            unfollowbtn.attr('id','fbtn');
            }
        });
});

HTML：

<a id="author" href="#"><%= showPost.username %></a> //this displays a username
<button style="width:100px;" type="button" id="fbtn">Follow</button>

我不知道哪里出错了，理论上这对我来说很好，但我是jquery和ajax的新手，我一定错过了什么。

Answer 1

您只需更改类并在代码中使用该类，而不是更改ID并为此编写JS：

＆＃13;

$("#fbtn").on('click', function() {
  var fbtn = $(this);
  if (fbtn.hasClass('follow')) {
    fbtn.removeClass('follow').addClass('unfollow');
    fbtn.text('Unfollow');
  } else {
    fbtn.removeClass('unfollow').addClass('follow');
    fbtn.text('Follow');
  }
  console.log('New Class: ' + fbtn.attr('class'));
  /*$.ajax({
    url: '/follow-unfollow',
    method: 'DELETE',
    success: function(response, err) {
      if (err) {
        console.log(err);
      }
      console.log("Unfollowd")
    }
  });
  */
});

＆＃13;

.follow {
  background: red;
}

.unfollow {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="width:100px;" class='follow' type="button" id="fbtn">Follow</button>

＆＃13;

Answer 2

动态crated元素概念的事件绑定

＆＃13;

$('body').on('click','#fbtn',function(){ 
    var fbtn = $('#fbtn');
    var followee_name = $('#author').text();

        
            console.log("Followed")
            fbtn.text('Unfollow');
            fbtn.attr('id','unfollow');
});

$('body').on('click',"#unfollow",function(){ 
    var unfollowbtn = $('#unfollow');
            console.log("Unfollowd")
            unfollowbtn.text('Follow');
            unfollowbtn.attr('id','fbtn');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button style="width:100px;" type="button" id="fbtn">Follow</button>

＆＃13;

Answer 3

您可以执行类似此操作的

，而不是使用直接事件绑定

$('body').on('click', "#unfollow", function(){ 
var unfollowbtn = $('#unfollow');
    $.ajax({
        url: '/unfollow',
        method: 'DELETE',
        //dataType: 'application/json',
        success: function(response,err){ 
        if(err){
            console.log(err);
        }
        console.log("Unfollowd")
        unfollowbtn.text('Follow');
        unfollowbtn.attr('id','fbtn');
        }
    });
});

和

$('body').on('click', "#fbtn", function(){ 
var fbtn = $('#fbtn');
var followee_name = $('#author').text();

    $.ajax({
        url: '/follow',
        method: 'POST',
        //dataType: 'application/json',
        data:{followee_name:followee_name},
        success: function(response){ 
        console.log("Followed")
        fbtn.text('Unfollow');
        fbtn.attr('id','unfollow');
        }
    });
});

Answer 4

我知道这不是你要问的。这只是一种替代解决方案。

你可以只有一个事件，只需要一个开关。

您可以使用.data()

存储状态

$(document).ready(function(){
	
	$( "#follow-action" ).click(function(){
		var action = $(this).data("action");

		switch( action ) {
			case "follow":
				$(this).data("action", "unfollow");
				$(this).text('Unfollow');
				
				/*
					Put your follow actions here.. ajax etc
				*/

				break;
			case "unfollow":
				$(this).data("action", "follow");
				$(this).text('Follow');
				
				/*
					Put your unfollow actions here.. ajax etc
				*/
				
				break;
		}
	});
	
	//console.log();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" id="follow-action" data-action="follow">Follow</button>

Answer 5

正如其他人所说，添加点击处理程序的时间意味着“取消关注”处理程序可能永远不会被触发，只会导致每次点击后都会运行“跟随”处理程序。

但是我不确定这是做你想做的最好的方法。为什么不只有两个按钮，一个隐藏。切换按钮的可见性，这可能比修改按钮更快。

$(document).ready(function() {
  $('#follow').on('click', function() {
    // do something with AJAX
    $('#followButtons').addClass('following');
  });

  $('#unfollow').on('click', function() {
    // do something with AJAX
    $('#followButtons').removeClass('following');
  });
});

#followButtons.following #follow {
  display: none;
}

#unfollow {
  display: none;
}

#followButtons.following #unfollow {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="followButtons" class="">
  <button id="follow" type="button">Follow</button>
  <button id="unfollow" type="button">Unfollow</button>
</div>

使用ajax和jquery更改id后，Button不起作用

5 个答案: