Tại sao sự kiện Hover không áp dụng được cho Element thêm vào sau này

Hôm qua chắc mọi người bận coi đá bóng nên ít vô diễn đàn. Mình thêm comment mới để anh em vào đọc và coi giúp mình với nghen.

Có cao thủ nào biết không, mình vẫn chưa tìm được ra lỗi gì

https://jsfiddle.net/daoan1412/6vp2r6z7/

Do bạn append mà jquery ko bind event hover theo nên bị lỗi, m ko chuyên jquery lắm sửa như trên ko biết đã đúng ý chưa?

Bạn có thể giải thích câu lệnh này ý nghĩa là thế nào không ạ:

      $('tbody').on('mouseover mouseout', 'tr', function(){
          // Code
      })

Tại vì thường mình đọc tài liệu chỉ hay gặp cách viết thế này thôi :

    $('tbody').on('mouseover', function(){
})

chứ như câu lệnh bạn viết quả thực mình chưa gặp trường hợp này bao giờ.

Mình chỉ đoán là : khi đưa chuột vào vùng tbody thì tr sẽ thực hiện lệnh code bên trong function() còn khi đưa chuột ra ngoài thì không thực hiện gì cả .

Mình đoán vậy … nhưng không biết đúng không ???

Còn nữa,cái này:

Do bạn append mà jquery ko bind event hover theo nên bị lỗi

Mình cũng chưa thực sự hiểu rõ, xin bạn cho mình thêm một vài câu phân tích hoặc keyword để mình tự tìm hiểu cũng được.

=> Cám ơn bạn rất nhiều

Hiểu cơ bản là khi trình duyệt thực hiện render trang, nó quét js và html, nó quét Jquery thì sẽ thực hiện bind tất cả những cái $(xxxxElements) vào bộ nhớ, và nó chỉ load 1 lần duy nhất với toàn bộ đối tượng đã được add vào DOM tại thời điểm render, thời điểm về sau nó sẽ không nhận biết được cái phần tử bạn mới add vào nên trở thành vô hiệu.

Còn :

$(‘tbody’).on(‘mouseover mouseout’, ‘tr’, function(){
// Code
})

Có nghĩa là nó cũng bind tất cả những gì mà nằm trong <tbody>, vì nó chỉ care đến các event liên quan tới <tbody> nên dù bạn thêm trước hay sau, trình duyệt vẫn hiểu và xử lí.

$('tbody tr').on('mouseover mouseout', function(){
}) /*
Cách viết này gọi là event direction , 
chỉ những element tr nào đã tồn tại lúc .on() được gọi
 thì mới chạy function bên trong kia*/

 $('tbody').on('mouseover mouseout', 'tr', function(){
          // Code
      })
/*
Cách viết này gọi là event delegation , 
kể cả append thêm element hay xóa element thì function vẫn được gọi 
khi xảy ra sự kiện mouseover mouseout
*/

bạn có thể tham khảo thêm ở đây http://api.jquery.com/on/