JQuery sự kiện nhấp chuột không hoạt động đúng sau khi thay đổi lớp

Question

Tôi có JQuery kịch bản tương tự như sau:

$('.follow_link').click(function(){ 
    // Do some stuff 
    $(this).removeClass(); 
    $(this).addClass("unfollow_link"); 
}); 

$('.unfollow_link').click(function(){ 
    // Do some stuff 
    $(this).removeClass(); 
    $(this).addClass("follow_link"); 
}); 

Vấn đề của tôi là sau khi tôi thay đổi lớp liên kết vẫn còn đề cập đến đó là lớp cũ nghe tiếng click kiện. Có cách nào để khôi phục? Hay tôi đang làm điều này một cách tồi tệ?

Answer 1

Bạn có thể sử dụng điều này, cả hai chức năng trong 1:

$('.unfollow_link, .follow_link').live("click", function(){ 
    $(this).toggleClass("follow_link unfollow_link"); 
}); 

Xem toggleClass, và live chức năng

.toggleClass (className) classNameOne hoặc lớp nhiều tên (cách nhau bằng dấu cách) để được chuyển đổi cho từng phần tử trong tập hợp đã so khớp.

Chỉnh sửa cho các phiên bản jQuery mới 1.6.4+

Kể từ khi live chức năng không tồn tại nữa, dưới đây là một sự thay thế:

$('body').on("click", '.unfollow_link, .follow_link', function(){ 
    $(this).toggleClass("follow_link unfollow_link"); 
}); 

Answer 2

Sẽ tốt hơn để cung cấp cho mỗi người trong số các liên kết một lớp thứ ba chỉ định rằng chúng là một phần của một nhóm. Một cái gì đó như a_link:

$('.a_link').bind('click', function() { 
    $(this).toggleClass('follow_link unfollow_link'); 
}); 

Answer 3

Hãy thử:

$('.follow_link, .unfollow_link').click(function() { 
    newclass = $(this).hasClass('follow_link') ? 'unfollow_link' : 'follow_link'; 
    $(this).removeClass().addClass(newclass) 
}); 

chỉnh sửa: Niels' giải pháp rất đẹp.

Answer 4

Vấn đề là jQuery hoạt động bằng cách chọn các yếu tố (đó là những gì $('.follow_link') không) và sau đó ràng buộc một event handler để những yếu tố (đó là những gì .click*function(){ không). Nó không quan trọng nếu lớp học thay đổi.

Javascript có tính năng gọi là sự kiện bubbling. Điều này có nghĩa rằng các yếu tố tổ tiên được thông báo về các sự kiện trên con cháu của họ. Điều này có nghĩa là bạn có thể kiểm tra bộ chọn khi sự kiện xảy ra, thay vì trên tài liệu sẵn sàng.

jQuery làm cho điều này dễ dàng với các chức năng on:

$(document.body).on('click', '.follow_link', function(){ 
    // Do some stuff 
    $(this).removeClass(); 
    $(this).addClass("unfollow_link"); 
}).on('click', '.unfollow_link', function(){ 
    // Do some stuff 
    $(this).removeClass(); 
    $(this).addClass("follow_link"); 
}); 

Lưu ý rằng chức năng này đã được giới thiệu trong jQuery 1.7. Để tương thích với các phiên bản trước, hãy sử dụng delegate.

Answer 5

Lưu ý: Tôi vừa gặp sự cố này ngay cả khi chức năng on() và vẫn gặp sự cố trên JQuery 1.10,

Thật sự tôi giải quyết vấn đề bằng cách thay thế:

$('.unfollow_link, .follow_link').live("click", function(){ 
    $(this).toggleClass("follow_link unfollow_link"); 
}); 

By

$(document).on('click','.unfollow_link, .follow_link', function(){ 
    $(this).toggleClass("follow_link unfollow_link"); 
});