Question

I create a new element inside Ext.Panel by template

i want to add an click event to p#more element

if i put:

Ext.select('#more').on('click', function() {
 // my code
});

inside handler: function() of Ext.Panel it works

but then i update the html inside the panel and event is not working anymore!!!

is there an listener for newly created DOM elements I can put my click event inside?

Answer 1

When you replace the HTML, all the events that were attached to children nodes stay linked to them, but the nodes do not exist anymore in the DOM.

And the events are not translated magically to new nodes either.

If you replace the HTML you need to attach the events to a parent node that will stay.
This is called event delegation.

You need to use target or srcElement(IE) to get the element that triggered the event, eg:

Ext.select('#parent-of-more').on('click', function(ev) { 
  var elm = ev.target || ev.srcElement;
  //elm is the element that was clicked
});