jQuery không nhận dạng các lớp được thêm vào trang động

Question

Tôi đang làm việc trên một dự án, nơi tôi muốn thêm nhiều thành phần của cùng một lớp vào một trang và làm cho tất cả các lớp này có thể truy cập thành $ ('selector') .nhấp chuột(); xử lý sự kiện. Điều gì đang xảy ra mặc dù, không có yếu tố nào được bổ sung động của cùng một lớp đang phản hồi các nhấp chuột.

Để cung cấp cho bạn một hình ảnh tốt hơn về những gì tôi muốn nói, tôi tạo thành một jsFiddle mẫu, mà là rất giống với các vấn đề thực tế trong dự án của tôi:

Liên kết đến jsFiddle: http://jsfiddle.net/8LATf/3/

• Một phần tử của lớp "added_element" nằm trên trang khi nó tải. Phần tử này có thể nhấp.

• Nút được nhấp và nút này thêm các yếu tố khác của lớp "added_element" vào trang tự động bằng cách nối thêm. Không có yếu tố nào trong số này có thể nhấp được.

Làm cách nào để tôi có thể làm cho tất cả các thành phần của lớp "added_element" có thể nhấp? Tôi đoán nó phải làm với bộ chọn tôi sử dụng trong trình xử lý sự kiện, nhưng tôi đã không thể tìm ra nó.

Bất kỳ trợ giúp nào được đánh giá cao !!!

Answer 1

You need to delegate your handler. Cách đơn giản nhất là để ủy thác tất cả mọi thứ cho document sử dụng .on('click', ...) (đây là cách .live() được chuyển đổi trong nội bộ, tính đến jQuery 1.7):

$(document).on('click','.added_element',function() { 
    var id = $(this).attr('id'); 
    alert(id);  
}); 

​http://jsfiddle.net/mblase75/8LATf/4/

Tuy nhiên, trong trường hợp của bạn, bạn có thể uỷ thác cho #container, vì tất cả các phần tử được thêm sẽ xuất hiện trong đó. Ủy quyền cho phần tử DOM gần nhất có thể thích hợp hơn vì lý do hiệu quả, khi có thể.

$('#container').on('click','.added_element',function() { 
    var id = $(this).attr('id'); 
    alert(id);  
}); 

​http://jsfiddle.net/mblase75/8LATf/5/

Answer 2

Khi bạn cắm xử lý sự kiện để "added_element" những người tạo ra tự động thông qua kịch bản không có trong DOM. Vì vậy, không có trình xử lý sự kiện nào được gắn với phần tử mới được tạo ra.

Để giải quyết vấn đề này, hãy đính kèm trình xử lý sự kiện vào div chứa và thay vào đó hãy tìm "add_element".

jfiddle: http://jsfiddle.net/yKJny/

Answer 3

Bạn cần phải sử dụng đoàn sự kiện ở đây, đúng cách để ràng buộc sự kiện sẽ là:

$('#container').on('click', '.added_element', function() { 
    var id = $(this).attr('id'); 
    alert(id); 
}); 

Đây là một corrected fiddle.