không chọn, trên() nhấp kiện

Question

Tôi gặp một số vấn đề trong thực hiện đoạn mã sau:

var i = 1; 
$('.hello:not(.selected)').on('click',function(){ 
    $(this).addClass('selected');  
    console.log(i++); 
}); 

Vấn đề là mã này nên kích hoạt chỉ ONE thời gian sau khi lớp chọn đã được thêm vào, nhưng nó là thực hiện nhiều lần, tôi chỉ muốn biến số i không tăng. Nói cách khác, tôi đang cố gắng để làm như sau (mà làm việc, nhưng tôi không muốn sử dụng các chức năng sống vì nó đã bị phản đối):

$('.hello:not(.selected)').live('click', function() { 
    $('.hello').removeClass('selected'); 
    $(this).addClass('selected'); 
... 
}); 

Cảm ơn rất nhiều cho câu trả lời của bạn trước, k

Answer 1

Mã của bạn đang tiến hành tập các phần tử mà hiện đáp ứng tiêu chí này:

$('.hello:not(.selected)') 

và thiết lập sự kiện này handler cho tất cả vĩnh cửu:

.on('click',function(){ 
    $(this).addClass('selected'); 
    $(this).css({opacity : 0.5});  
    console.log(i++); 
}); 

Đặc biệt quan trọng là thực tế là sau khi trình xử lý được đặt trên một phần tử, nó sẽ tiếp tục hoạt động ngay cả khi sau này phần tử đó không còn đáp ứng các tiêu chí (trong trường hợp này, bằng cách đạt được lớp selected).

Có một số cách để đạt được hành vi mong muốn. Một sẽ tự động kiểm tra xem các "bộ lọc" điều kiện vẫn giữ bên trong xử lý sự kiện:

$('.hello').on('click',function(){ 
    if($(this).hasClass('selected')) { 
     return; 
    } 
    $(this).addClass('selected'); 
    $(this).css({opacity : 0.5});  
    console.log(i++); 
}); 

khác sẽ được ủy sự kiện này - trong trường hợp này, một yếu tố phụ huynh sẽ được thông báo về sự kiện này trên một hậu duệ của nó và nó sẽ động kiểm tra những gì đã nói thỏa mãn hậu duệ các điều kiện lọc trước khi quyết định để kích hoạt event handler (mã trơ trẽn dán từ câu trả lời Ben Lee):

$('body').on('click', '.hello:not(.selected)', function() { 
    $(this).addClass('selected'); 
    $(this).css({opacity : 0.5});  
    console.log(i++); 
}); 

Answer 2

Sự cố là trình xử lý sự kiện không bị xóa chỉ vì bạn thay đổi lớp học. Bạn đang gắn các sự kiện vào các phần tử và chúng ở đó mãi mãi.

Để làm được việc này, bạn chỉ có thể kiểm tra cho lớp "chọn" trên mỗi tay cầm kiện:

$('.hello:not(.selected)').on('click',function(){ 
    if ($(this).hasClass('selected')) { 
     $(this).addClass('selected'); 
     $(this).css({opacity : 0.5});  
     console.log(i++); 
    } 
}); 

Nhưng đối với hiệu quả và mã đơn giản hơn, bạn nên có lẽ ủy này:

$('body').on('click', '.hello:not(.selected)', function() { 
    var $self = $(this); 
    $self.addClass('selected'); 
    $self.css({opacity : 0.5});  
    console.log(i++); 
}); 

Tôi đã sử dụng "body" làm phần tử để đính kèm ủy quyền này, nhưng bạn có thể nên sử dụng thứ gì đó thấp hơn trong cây, như cha mẹ hoặc ông bà của các phần tử ".ello". Điều này chỉ gắn một trình xử lý sự kiện và dựa vào việc tạo bọt để kiểm tra trạng thái đã chọn của mỗi phần tử khi chúng thay đổi theo thời gian thực.

Cũng lưu ý rằng tôi đã lưu trong bộ nhớ cache var $self = $(this); đó cũng là vì hiệu quả, vì vậy bạn không kết thúc jQuery - mở rộng phần tử nhiều hơn mức bạn cần.