Sử dụng .on() và e.stopPropagation() trên các thành phần động

Question

Tôi đã thử nghiệm với các sự kiện nhấp chuột bên ngoài các phần tử sử dụng stopPropagation().

$(".container").children().on('click',function(e){ 
    e.stopPropagation();  
}); 
$(".container").on("click",function(){ 
    alert("outside the box?");  
})​ 

Here is a jsFiddle set up to demonstrate it functioning. Một cảnh báo sẽ kích hoạt khi bạn nhấp vào bất kỳ đâu bên ngoài hộp màu trắng.

Bây giờ, tôi đang cố gắng áp dụng nguyên tắc tương tự cho các yếu tố được tạo động. Theo tôi hiểu, phương thức gán sự kiện on() trong jQuery sẽ cho phép chức năng này hoạt động mà không thay đổi tập lệnh.

Here is a second jsFiddle nơi trước tiên bạn phải nhấp vào liên kết để tạo thành phần. Một khi bạn đã làm điều này, lý thuyết là rằng cùng một kịch bản sẽ làm việc, nhưng nó không. Tôi đang thiếu gì về phương pháp này?

Answer 1

Nói ngắn bạn cần phải đặt on() trên yếu tố phụ huynh hiện có để làm cho nó hoạt động:

$('body').on('click', 'a', function(e){ 
    e.preventDefault(); 
    $('<div class="container"><div class="box"></div></div>').appendTo('body'); 
    $(this).remove(); 
}); 

$('body').on('click', '.container > *', function(e){ 
    e.stopPropagation();  
}); 

$('body').on('click', '.container', function(){ 
    alert("outside the box?");  
})​ 

Code: http://jsfiddle.net/GsLtN/5/

Để biết thêm chi tiết kiểm tra '.on()' trên trang web chính thức tại phần 'Các sự kiện trực tiếp và được ủy quyền'

Answer 2

Bạn cần phải liên kết .on() với cha mẹ.

Điều bạn đang cố gắng làm là - ràng buộc trình xử lý cho phụ huynh lắng nghe sự kiện, sau đó kiểm tra xem sự kiện có được kích hoạt bởi một yếu tố phù hợp với bộ chọn đó hay không.

$("body").on("click", '.container',function(){ 
    alert("outside the box?");  
})​ 

fiddle Cập nhật here

Answer 3

Khi mục được thêm tự động, bạn nên đính kèm các handler để phụ huynh gần nhất mà chắc chắn sẽ có mặt ở đó - trong trường hợp của bạn này là body. Bạn có thể sử dụng on() this way to achieve a functionality rằng delegate() sử dụng để cung cấp:

$ (selector-cho-mẹ) .Trên (sự kiện, selector-cho-động-trẻ em, handler);

Vì vậy, mã viết lại của bạn sẽ chỉ đơn giản là thế này:

$("body").on('click', '.container', function(e){ 
    var $target = $(e.target); 
    if ($target.hasClass('container')) { 
     alert("outside the box!"); 
    } 
}); 

tôi đã sử dụng e.target để tìm yếu tố nào thực sự gây ra sự kiện này. Trong trường hợp này, tôi xác định mục bằng cách kiểm tra xem nó có lớp container hay không.

jsFiddle Demo

Answer 4

The demo.

Khi bạn liên kết một xử lý sự kiện cho một yếu tố sử dụng .on, các mục tiêu mà bạn liên kết với phải tồn tại trong domcument.

$('body').on('click', '.container > *', function(e){ 
    e.stopPropagation();  
}); 
$('body').on("click",'.container',function(){ 
    alert("outside the box?");  
})​ 

Answer 5

Theo tài liệu cho jQuery.on():

xử lý tổ chức sự kiện đang bị ràng buộc duy nhất với các yếu tố hiện đang được chọn; họ phải tồn tại trên trang tại thời điểm mã của bạn thực hiện cuộc gọi đến .on().

Bạn sẽ phải ràng buộc sự kiện vào vùng chứa chính. Có lẽ một cái gì đó như THIS.