在jQuery中處理點擊事件（“喜歡”和“不喜歡”按鈕）

Question

我正在嘗試使用AJAX和jQuery創建一個Like-Unlike系統。 “喜歡”事件似乎正常運行，但是當我想要“不喜歡”事件時，該響應沒有響應。 任何解決此問題的建議，不勝感激。

$(document).ready(function() {
    $(".like").click(function() { //this part is working
        var item_id = $(this).attr("id");
        var dataString = 'item_id=' + item_id;
        $('a#' + item_id).removeClass('like');
        $('a#' + item_id).html('<img src="images/loader.gif" class="loading" />');
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: dataString,
            cache: false,
            success: function(data) {
                if (data == 0) {
                    alert('you have liked this quote before');
                } else {
                    $('a#' + item_id).addClass('liked');
                    $('a#' + item_id).html(data);
                }
            }
        });

    });

    $(".liked").click(function() { //this part is not working
        var item_id = $(this).attr("id");
        console.log(item_id);
        var dataString = 'item_id=' + item_id;
        $('a#' + item_id).removeClass('liked');

        $('a#' + item_id).html('<img src="images/loader.gif" class="loading" />');
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: dataString,
            cache: false,
            success: function(data) {
                if (data == 0) {
                    alert('you have liked this quote before');
                } else {
                    $('a#' + item_id).addClass('like');
                    $('a#' + item_id).html(data);
                }
            }
        });

    });
});

Answer 1

准備好文檔后，將檢索$(".like")和$(".liked") ，但是從元素中添加/刪除類時不會對其進行更新。

如果您分配一個更通用的類，則投票元素（如“ like-toggle”）將可以執行以下操作：

 $(document).ready(function() { $('.like-toggle').click(function(event) { if ($(event.target).hasClass('like') { // Call your unlike code, replace like with liked. } else { // Call your like code, replace liked with like. } }); }); 

這將起作用，因為like-toggle類永遠不會從元素中刪除，因此在文檔准備就緒時存在的元素將繼續運行。