Binding Jquery & sự kiện Ngày Elements tạo ra thông qua sự kiện khác

Question

Tôi đang phải đối mặt với vấn đề trên ràng buộc sự kiện jquery vào các mặt hàng tạo ra thông qua hành động khác ví dụ như khi nạp thêm liên kết nhấp

e.g there are list of elements 
<div class="itm" id="c_1"></div> 
<div class="itm" id="c_2"></div> 
.... 

Khi nhấp chuột vào tải liên kết hơn, nó sẽ tạo ra nhiều các yếu tố, ví dụ:

<div class="itm" id="c_11"></div> 
<div class="itm" id="c_12"></div> 
... 

Khi tải trang, tôi đang sử dụng tập lệnh jquery sau để liên kết sự kiện nhập và rời chuột.

$('.itm').on({ 
    mouseenter: function (e) { 
     alert('mouse enter'); 
    }, 
    mouseleave: function (e) { 
    alert('mouse leave'); 
    }   
});  

Điều này sẽ áp dụng thành công sự kiện trên các yếu tố c_1, c_2 nhưng khi tải thêm cuộc gọi liên kết, nó sẽ tạo ra nhiều phần tử hơn. cho điều này tôi unbind di chuột sự kiện và ràng buộc nó một lần nữa một khi các yếu tố mới được tạo ra theo chức năng gọi là khi tải liên kết nhiều hơn nhấp vào.

$(".cmtldmore").on('click', function (e) { 
    // Ajax process to load more elements in tray. 
    // Unbind hover event 
    $('.itm').off(); 
    // Bind it again 
    $('.itm').on({ 
    mouseenter: function (e) { 
      alert('mouse enter'); 
    }, 
    mouseleave: function (e) { 
      alert('mouse leave');  
      } 
     }); 
    }); 

Cả hai đã và tải nhiều yếu tố hiển thị đúng trên trang, Nhưng vẫn lơ lửng sự kiện đúng cách gọi trên đã tạo ra các yếu tố, nhưng không phải trên các yếu tố tạo ra bởi "nạp thêm" sự kiện.

Bất kỳ ai có thể giúp tôi đính kèm đúng sự kiện trên các yếu tố được tạo động thông qua gọi các sự kiện hoặc chức năng jquery khác.

Answer 1

On nội dung động bạn sẽ cần phải ủy, một cái gì đó như thế này:

$(document).on({ 
    mouseenter: function (e) { 
     alert('mouse enter'); 
    }, 
    mouseleave: function (e) { 
    alert('mouse leave'); 
    }   
}, '.itm'); 

Bạn nên thay thế document với phụ huynh gần nhất mà không được chèn với Ajax.

Answer 2

Có một cái nhìn tại "các sự kiện trực tiếp và ủy thác" của tài liệu on:

http://api.jquery.com/on/

Bạn có thể sử dụng đoàn sự kiện để đối phó với vấn đề này.

$('#itmWrapper').on({ 
    mouseenter: function (e) { 
     alert('mouse enter'); 
    }, 
    mouseleave: function (e) { 
    alert('mouse leave'); 
    }   
}, '.itm'); 

này sẽ ràng buộc các sự kiện vào một yếu tố wrapper (tạo thành id itmWrapper, điều này có thể cơ thể nếu không có cha mẹ thường) và áp dụng cho tất cả các yếu tố phù hợp với bộ chọn trong wrapper rằng bất kể khi họ đang có thêm.