Ext JS on click event

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.

Answers


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

Need Your Help

Angularjs Bind variables into external css file

javascript html css angularjs angularjs-scope

i'm trying to figure out how to bind angularjs scope vars into external css file the problem i think is the curly braces here is what i'm basically trying to do:

Detect if word typed by user matches a string in Array List in Java

java string arraylist keyevent

I am trying to create a game like Typer Shark in Java. I am having a problem detecting whether a string typed by a user matches an element in an Array List. I tried doing it this way: