Sự kiện không hoạt động trên phần tử được tạo động

Question

Tôi đang kéo tóc ra để cố gắng tìm ra lý do tại sao sự kiện di chuột sẽ không hoạt động với trình xử lý .on với phần tử được tạo động từ ajax. Điều duy nhất mà dường như làm việc là mã với .live nhưng tôi hiểu rằng nó không được chấp nhận.

$(".dropdown ul li").live("mouseover", function() { 
alert('mouseover works'); 
}); 

Tuy nhiên, khi tôi thử sử dụng .Trên, nó sẽ không hoạt động - không có vấn đề gì biến tôi cố gắng (document.ready, .mouseover, etc etc)

$(".dropdown ul li").on("mouseover", function() { 
alert('mouseover works'); 
}); 

Các xử lý sự kiện đang ở dưới cùng của mã, do đó, chúng được thực thi cuối cùng. Bất cứ ai có một ý tưởng về những gì tôi đang làm sai?

Answer 1

Sử dụng .on cho các yếu tố mới được tạo ra với đoàn sự kiện độnghttp://api.jquery.com/on/ - nơi chọn chính của bạn là một tồn tại tĩnh mẹ:

$(".static-parent").on("event1 event2", ".dynamic-child", function() { 

hoặc trong trường hợp của bạn:

$(".dropdown").on("mouseover", "li", function() { 
    alert('mouseover works!!!!!!!!!'); 
}); 

Sự kiện được ủy quyền có lợi thế là họ có thể xử lý các sự kiện từ hậu duệ ements được thêm vào tài liệu sau này. Bằng cách chọn một yếu tố đảm bảo sẽ có mặt tại thời điểm xử lý sự kiện giao được đính kèm, bạn có thể sử dụng giao các sự kiện để tránh sự cần thiết phải thường xuyên gắn và gỡ bỏ xử lý sự kiện. Phần tử này có thể là phần tử container của một khung nhìn trong thiết kế Model-View-Controller, ví dụ, hoặc tài liệu nếu trình xử lý sự kiện muốn theo dõi tất cả các sự kiện bubbling trong tài liệu. Phần tử tài liệu có sẵn trong phần đầu của tài liệu trước khi tải bất kỳ HTML nào khác, do đó, an toàn để đính kèm sự kiện ở đó mà không cần đợi tài liệu sẵn sàng.

Ngoài ra hãy chắc chắn sử dụng một DOM sẵn sàng chức năng

jQuery(function($) { // DOM is now ready and $ alias secured 

    $(".dropdown").on("mouseover", "li", function() { 
     alert('mouseover works!!!!!!!!!'); 
    }); 

});