有数据ajax返回unf,使用ajax和jquery更改id后，Button不起作用

I am trying to make a follow/unfollow button. The follow button works fine. On click I change the button id to "unfollow" but when I click the button again (when it has the id "unffollow") it acts as if it still has the id of "follow" which means it's still using the first ajax method as so:

我正在嘗試制作一個關注/取消關注按鈕。以下按鈕工作正常。單擊時我將按鈕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');

}

});

});

Then:

$("#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:

//this displays a username

Follow

I don't know where I went wrong, in theory this looks fine to me but I am new to jquery and ajax and I must have missed something.

我不知道哪里出錯了,理論上這看起來不錯,但我是jquery和ajax的新手,我一定錯過了什么。

5 个解决方案

#1

1

Instead of using direct event binding you can do something like this

而不是使用直接事件綁定,你可以做這樣的事情

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

}

});

});

and

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

}

});

});

#2

2

Instead of changing ID and writing JS for that, you rather just change class and use that class in code:

您不必更改ID並為此編寫JS,而只需更改類並在代碼中使用該類:

$("#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")

}

});

*/

});

.follow {

background: red;

}

.unfollow {

background: green;

}

Follow

#3

1

Event binding for dynamic crated elements concept

動態crated元素概念的事件綁定

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

});

Follow

#4

1

I know this is not what you are asking. This is just an alternative solution.

我知道這不是你要問的。這只是一種替代解決方案。

You can just have one event and just a switch inside.

你可以只有一個事件,只需一個開關。

You can store the status using .data()

您可以使用.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();

});

Follow

#5

1

As others have stated, the time when the click handlers are added means that the "unfollow" handler would likely never get triggered and would just result in the "follow" handler running after every click.

正如其他人所說,添加點擊處理程序的時間意味着“取消關注”處理程序可能永遠不會被觸發,並且只會導致每次點擊后運行“跟隨”處理程序。

However I'm not sure this is the best way to do what you want. Why not just have two buttons with one hidden. Toggling the visibility of the buttons which is likely way quicker than modifying the button.

但是我不確定這是做你想做的最好的方法。為什么不只有兩個按鈕,一個隱藏。切換按鈕的可見性,這可能比修改按鈕更快。

$(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;

}

Follow

Unfollow