Ext JS的点击事件 [英] Ext JS on click event

问题描述

我有以下事件：

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

});

当页面加载时，该功能正常。

Which works fine when the page loads.

然而，我动态地创建了类图库项目的其他div，其中包含一个图像。

However I dynamically create additional divs of the class gallery-item with a image inside them. The click event stops working once I create a new item.

我可以如何更新此绑定？

How may I 'update' this binding?

谢谢。

推荐答案

Ext.select 选择所有元素和静态当时添加点击处理程序到他们。要使新元素具有相同的处理程序，它们在创建后也必须添加到它们中。但是，这不是一个最佳方法。

Ext.select selects all the elements and statically adds the click handler to them at that time. For new elements to have the same handler, it would have to also be added to them after they are created. However, this is not an optimal approach.

在这种情况下最好使用事件委托 - 将单个点击处理程序添加到容器元素中，然后根据点击的项目委托处理。这更有效（只需要一个事件处理程序fn）并且更灵活。例如，如果你的包含元素的id为'gallery-ct'，那就像：

It would be better to use event delegation in this case -- add a single click handler to your container element, then delegate the handling based on the item that was clicked. This is more efficient (only one event handler fn required) and far more flexible. For example, if your containing element had the id 'gallery-ct' it would be like:

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中起泡，那么您知道它仍然是有效的点击。更新的代码：

EDIT: If you may have nested items within your click target, you'll want to take a slightly (but not much) more advanced approach and look for your target as the click event bubbles up from the clicked element (using EventObject.getTarget). If your target is in the event chain as it bubbles up from the clicked el, then you know it's still a valid click. Updated code:

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

这篇关于Ext JS的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！