JQuery类选择器在removeClass后仍然触发

Question

我正在创建一个小型投票机制，通过 AJAX 快速发送数据库时间戳。一系列带有“vote”类的按钮是投票的触发器，下方有文本显示特定项目的“votes”数量。

在我从点击事件中运行 AJAX 方法后，我删除了“vote”类，以便该项不能再有多个。但是，我的问题是即使已经删除了类，触发器仍然可以触发并增加许多票数。

以下是元素的 HTML：

        <div class="points">
        <img class="vote" src="images/up.gif" alt="'.$idea['id'].'">
        <p class="vote-'.$idea['id'].'">'.$points.' Points</p>
    </div>

以下是jQuery调用：

    $('.vote').click(function(){
        var iID = $(this).attr('alt');
        var typeString = "id="+iID;
        $.ajax({
            type: "POST",
            url:"vote.php",
            data: typeString,
            success: function (txt){
                $('.vote-'+iID).html('<p>'+txt+' Points</p>');
            }
        }); 
        $(this).attr('src', 'images/voted.gif');
        $(this).removeClass('vote');
    });

- JMichaliga

---

$(this).removeClass('vote').unbind('click'); - czarchaic

根据meder的回答：你可能想使用jQuery的$(".vote").live("click", function () {});而不是click，这样如果你动态创建元素，就不必担心绑定和解绑的问题。 - S Pangborn

Answer 1

你正在将事件处理程序附加到DOM元素上，并且它会保持不变。你可以选择以下两种方式之一：

a. 像这样设置.data('triggered', 1)：

if ( !$(this).data('triggered') ) {
  // do code
  $(this).data('triggered', 1);
}

b.

if ( $(this).hasClass('vote') ) {
   // do code
}

c. 使用.live代替.click，例如$('.foo').live('click', fn)

d. 在调用代码后手动删除事件处理程序，将$(this).unbind('click')作为最后一行放在移除类位之后

- meder omuraliev

Answer 2

DOM元素的class用于引用它，而不是改变它的事件绑定行为。

要删除DOM元素的点击事件，请使用unbind。

- Luca Matteis

Answer 3

选择器只在第一次调用时被评估。它不会在每次触发事件以检查哪些元素匹配时重新评估；这样会很慢。

- Chase Seibert