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 класса-галереи с изображением внутри них. Событие click перестает работать после создания нового элемента.

Как мне update этот переплет?

Спасибо.

Answer 1

Ext.select выбирает все элементы и статически добавляет к ним обработчик кликов. Чтобы новые элементы имели одинаковый обработчик, его также необходимо добавить к ним после их создания. Однако это не оптимальный подход.

В этом случае было бы лучше использовать делегирование событий - добавьте обработчик одного клика к вашему элементу контейнера, а затем делегируйте обработку, основываясь на элементе, по которому щелкнули. Это более эффективно (требуется только один обработчик событий) и гораздо более гибко. Например, если ваш содержащий элемент имеет идентификатор «gallery-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');
      }
    });
});