单击事件上的 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.

我如何更新这个绑定?

谢谢.

推荐答案

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屋！