的Ext JS的單擊事件

Question

我有以下事件：

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'); 
}); 

}); 

其中一期工程時，頁面加載罰款。

但是，我動態地創建類圖庫項目的額外的div與其中的圖像。創建新項目後，點擊事件停止工作。

我該如何'更新'這個綁定？

謝謝。

Answer 1

Ext.select選擇所有元素，並在當時靜態添加點擊處理程序。對於具有相同處理程序的新元素，它們必須在創建後添加到它們中。但是，這不是一個最佳方法。

在這種情況下使用事件委託會更好 - 爲您的容器元素添加一個單擊處理程序，然後基於被單擊的項目委派處理。這是更高效的（只需要一個事件處理程序）並且更加靈活。例如，如果您包含的元素有ID「畫廊-CT」它會像：

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'); 
     } 
    }); 
}); 

編輯：如果可能的點擊目標內嵌套的項目，你要採取一種（但不是太多）更高級的方法，並在點擊事件從點擊元素中冒出來時尋找目標（使用EventObject.getTarget）。如果您的目標位於事件鏈中，因爲它從點擊的el中冒出來，那麼您知道它仍然是有效的點擊。更新的代碼：

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'); 
     } 
    }); 
});