我已更改過某個類的元素的火事件

Question

如果我做錯了，我很抱歉。這是我第一次在這裏問一些問題。 我也爲我可憐的英語感到抱歉。

看，我有麻煩了。我只爲我和我的朋友創建一個迷你社交網絡。 我是這個jQuery/Ajax新手，所以他們說我的頁面太靜態，他們必須做的事情，頁面刷新，這是可怕的。然後我決定學習一些'動態'的東西，我開始有一些問題。因此，我有一個「Like-like」（哈哈）按鈕，我想創建一個「like（undo）-like」按鈕。

我會盡量模仿我的問題：

<a class="like">Like</a> 
$('.like').click(function(){ 
    //Like in database 
    $(this).html('Like(Undo)'); 
    $(this).removeClass('like'); 
    $(this).addClass('like-undo'); 
}); 

所以，當我點擊，就會觸發「喜歡」集體訴訟，而不是「像 - 撤消」。 任何人都可以幫助我嗎？我已經快死了。

對不起，如果我做錯了，再多一次。

Answer 1

事件處理程序綁定到元素。當您更改元素的類時，不會更改綁定到它的處理程序。幸運的是，對於這種情況，如果您使用event delegation，則可以獲得該行爲：

$('some-common-container').on('click', '.like', function() { 
    //... 
}); 

$('some-common-container').on('click', '.like-undo', function() { 
    //... 
}); 

Answer 2

正如你所說，現在你的頁面是動態的，所以你告訴你的js，當他們點擊。像類一樣觸發該函數時，現在的問題是你正在刪除類，就像現在它有一個類。 -undo這樣一個簡單的解決辦法是增加一個功能，以顯示您的js做什麼，如果你點擊。像-撤消類

$('.like').click(function(){ 
    //Like in database 
    $(this).html('Like(Undo)'); 
    $(this).removeClass('like'); 
    $(this).addClass('like-undo'); 
}); 

$('.like').click(function(){ //notice you do opossite acctions 
    //dislike in database 
    $(this).html('Like'); 
    $(this).removeClass('like-undo'); 
    $(this).addClass('like'); 
}); 

希望它能幫助！