Расширение JS по щелчку событие

Question

Расширение JS по щелчку событие

У меня есть следующее событие:

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

});

Который хорошо работает, когда страница загружается.

Однако я динамично создаю дополнительные отделения объекта галереи класса с изображением в них. Событие щелчка прекращает работать, после того как я создаю новый объект.

Как может я update эта привязка?

Спасибо.

6

extjs

задан Narendra Jadhav 13 August 2018 в 05:34

1 ответ

Другие вопросы по тегам:

extjs

Похожие вопросы:

score 12 · Accepted Answer

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

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