Bộ chọn lớp JQuery vẫn kích hoạt sau khi removeClass

Question

Tôi đang tạo một cơ chế bỏ phiếu nhỏ để gửi một dấu thời gian cơ sở dữ liệu nhanh chóng thông qua AJAX.

Một loạt các nút có lớp "bỏ phiếu" là trình kích hoạt để bỏ phiếu, trong khi có văn bản bên dưới để hiển thị số lượng "phiếu bầu" cho mục cụ thể đó.

Sau khi tôi chạy phương thức AJAX từ sự kiện nhấp, tôi xóa lớp "bỏ phiếu" sao cho không thể có nhiều hơn một từ mục đó. Tuy nhiên vấn đề của tôi là ngay cả với lớp đã loại bỏ, kích hoạt vẫn có thể kích hoạt và tăng số phiếu bầu.

Đây là mã HTML của phần tử:

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

Dưới đây là Call 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'); 
    }); 

Answer 1

class của phần tử DOM được sử dụng để tham chiếu nó, không thay đổi hành vi Ràng buộc sự kiện của nó.

Để xóa phần tử DOM, hãy sử dụng sự kiện nhấp chuột unbind.

Answer 2

Bạn đang gắn các xử lý sự kiện cho các phần tử DOM, và nó vẫn còn nguyên vẹn. Bạn có thể

a. đặt .data('triggered', 1) như sau:

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

b.

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

c. sử dụng .live thay vì .click, ví dụ: $('.foo').live('click', fn)

d. xóa trình xử lý sự kiện theo cách thủ công sau khi gọi mã của bạn, $(this).unbind('click') làm dòng cuối cùng, sau khi xóa lớp bit

Answer 3

Bộ chọn chỉ được đánh giá một lần, khi được chọn lần đầu tiên. Nó không được đánh giá lại mỗi khi một sự kiện được kích hoạt để kiểm tra xem các yếu tố nào phù hợp; điều đó sẽ chậm.