Ext JS trên nhấp chuột kiện

Question

tôi có sự kiện sau đây:

Ext.onReady(function() { 

Ext.select('.gallery-item img').on('click', function(e) { 
    Ext.select('.gallery-item').removeClass('gallery-item-selected'); 
    Ext.get(e.target).parent().addClass('gallery-item-selected'); 
}); 

}); 

nào hoạt động tốt khi tải trang.

Tuy nhiên, tôi tự động tạo các div bổ sung của thư viện lớp học với một hình ảnh bên trong chúng. Sự kiện nhấp ngừng hoạt động khi tôi tạo một mục mới.

Làm cách nào để 'cập nhật' liên kết này?

Cảm ơn.

Answer 1

Ext.select chọn tất cả các phần tử và thêm tạm thời trình xử lý nhấp chuột vào chúng tại thời điểm đó. Đối với các phần tử mới để có cùng một trình xử lý, nó sẽ phải được thêm vào chúng sau khi chúng được tạo ra. Tuy nhiên, đây không phải là một cách tiếp cận tối ưu.

Sẽ tốt hơn nếu sử dụng ủy quyền sự kiện trong trường hợp này - thêm một trình xử lý nhấp chuột duy nhất vào phần tử vùng chứa của bạn, sau đó ủy quyền xử lý dựa trên mục được nhấp. Điều này hiệu quả hơn (chỉ cần một trình xử lý sự kiện fn) và linh hoạt hơn nhiều. Ví dụ, nếu yếu tố chứa của bạn có id 'gallery-ct' nó sẽ như thế nào:

Ext.onReady(function() { 
    Ext.get('gallery-ct').on('click', function(e, t){ 
     // t is the event target, i.e. the clicked item. 
     // test to see if it is an item of the type you want to handle 
     // (it is a DOM node so first convert to an Element) 
     t = Ext.get(t); 
     if(t.hasClass('gallery-item'){ 
     // radioClass automatically adds a class to the Element 
     // and removes it from all siblings in one shot 
     t.radioClass('gallery-item-selected'); 
     } 
    }); 
}); 

EDIT: Nếu bạn có thể lồng các mục trong mục tiêu nhấp chuột của bạn, bạn sẽ muốn có một chút (nhưng không nhiều) phương pháp tiếp cận nâng cao hơn và tìm mục tiêu của bạn khi sự kiện nhấp chuột bong bóng từ yếu tố được nhấp (sử dụng EventObject.getTarget). Nếu mục tiêu của bạn nằm trong chuỗi sự kiện khi chuỗi quảng cáo xuất hiện từ el được nhấp, thì bạn biết đó là một nhấp chuột hợp lệ. Mã được cập nhật:

Ext.onReady(function() { 
    Ext.get('gallery-ct').on('click', function(e, t){ 
     // disregard 't' in this case -- it could be a child element. 
     // instead check the event's getTarget method which will 
     // return a reference to any matching element within the range 
     // of bubbling (the second param is the range). the true param 
     // is to return a full Ext.Element instead of a DOM node 
     t = e.getTarget('.gallery-item', 3, true); 
     if(t){ 
     // if t is non-null, you know a matching el was found 
     t.radioClass('gallery-item-selected'); 
     } 
    }); 
});