sự kiện jquery không làm việc cho các yếu tố gắn

Question

Tôi có trang web here

này Như bạn có thể thấy có một thanh trượt hình ảnh nhỏ xíu cho "hình ảnh" và "Web Templates" tab nơi hình ảnh được trượt từ phải sang trái , sau đó biến mất và sau đó nó xuất hiện ở phần cuối của phần tử gốc (một số <tr> trong trường hợp của tôi).

Nếu bạn di chuột qua các hình ảnh nhỏ, bạn có thể xem bản xem trước ở bên trái.

Cho đến nay rất tốt.

Nhưng nếu bạn đợi cho đến khi hình ảnh đầu tiên xuất hiện trở lại, sự kiện di chuột sẽ không hoạt động nữa.

Có thể jquery không thể thấy các phần tử được nối thêm mới ở cuối thẻ <tr>?

Answer 1

Cách bạn ràng buộc các sự kiện của mình sẽ không hoạt động đối với các yếu tố được thêm động. Trong preview_script.js bạn có:

$(".box_body img").hover(function(){ 

Điều này sẽ thêm trình xử lý sự kiện cho tất cả thẻ img với lớp "box_body", nhưng những người được thêm vào sau sẽ KHÔNG nhận được sự kiện.

Hãy thử điều này:

$(document).on("hover", ".box_body img", function() {..}); 

này sẽ thêm sự kiện vào tài liệu, và chỉ bắn nó nếu eventtarget là img với class = "box_body". Kể từ khi sự kiện tuyên truyền này nên làm việc miễn là không có gì ở giữa dừng lại trước khi nó đạt đến tài liệu (bằng cách gọi "event.stopPropagation()")

Nếu bạn biết PARENT của ".box_body img" bạn có thể thay thế tài liệu rằng, điều này sẽ làm việc tốt hơn một chút vì bạn không phải chờ sự kiện để phổ biến tài liệu.

Lưu ý rằng bạn có thể thực hiện được điều tương tự sử dụng đại biểu (nếu trên không có sẵn):

$(document).delegate(".box_body img", "hover", function() {..}); 

Answer 2

Bạn sẽ muốn sử dụng .live() chức năng của jQuery để đính kèm xử lý sự kiện đến các yếu tố sẽ được tạo ra trong tương lai. Đây là doc: http://api.jquery.com/live/ đây là cách sử dụng:

$(".dynamicButtons").live("hover", function() { 
    //do stuffs 
}); 

Answer 3

Một số mã sẽ có ích.

Bạn có đang xóa các mục từ đầu và sau đó chèn chúng vào cuối thanh trượt không?

Nếu câu trả lời là "có", bạn nên sử dụng

$('selector').delegate('subselector', 'hover', function() { 
    //your code there 
}); 

thay vì

$('selector subselector').hover(function() { 
    //your code there 
}); 

Vui lòng kiểm tra http://api.jquery.com/delegate/ để biết thêm thông tin.

Answer 4

Tôi khuyên bạn nên sử dụng livequery để giúp bạn hòa hợp với các yếu tố mới được thêm vào trong javascript của bạn.Một ví dụ về sử dụng sẽ là:

$('.elementAdded').livequery('event',function(){ 
    //do stuff 
}) 

Tôi có một số vấn đề sử dụng .on() vì nó sẽ ràng buộc các sự kiện để các mặt hàng chỉ một lần (sau khi tài liệu sẵn sàng cho ví dụ).

Hy vọng điều đó sẽ hữu ích.

Answer 5

Trong script.js tập tin thay đổi của bạn ở đây http://web-art.netau.net/script.js

$(".box_body img").hover(function(){ 
      var src=$(this).attr("src"); 
      var target=$(this).parents("table").attr("id").split("_").pop(); 
      $("#preview_"+target).attr({src:src}); 
}) 

dòng 112-116 như sau

$(document).on('mouseenter',".box_body img",function(){ 
     var src=$(this).attr("src"); 
     var target=$(this).parents("table").attr("id").split("_").pop(); 
     $("#preview_"+target).attr({src:src}); 
}); 

Lý do đằng sau này đã được trả lời nhiều lần trong SO. Tìm kiếm và tìm câu trả lời hay. Giống như

Event binding on dynamically created elements?

In jQuery, how to attach events to dynamic html elements?

jquery binding events to dynamically loaded html elements