Question

I have the following 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.

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?

Thanks.

Answer 1

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.

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

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