How to apply the live () function to added DOM elements for JavaScript

Question

How to apply live() as a function for added DOM elements for JavaScript?

Like the li list inside ul , which is added via JavaScript. I need to do this in regular JavaScript.

Answer 1

Since .live() is just delegating events, place the handler on the closest element to be added.

 var container = document.getElementById('my_container'); container.onclick = function(e) { e = e || window.event; var target = e.target || e.srcElement; while(target && target.nodeName.toUpperCase() !== 'LI' ) { if( target === this ) target = null; else target = target.parentNode; } if( target ) { // work with the LI } }; 

It also looks like .live() in the sense that it searches from e.target to the delegate container to see if it is your target element.

Just testing e.target itself e.target not enough if li has children.

---

For a more complex analysis of elements, you can use .matchesSelector , although you need to bind it to HTMLElement.prototype under the correct name, since most browsers include it as an extension.

In addition, you will need a patch for IE8, but it is quite easy.

 if (HTMLElement) { if (!HTMLElement.prototype.matches && !HTMLElement.prototype.matchesSelector) { HTMLElement.prototype.matches = HTMLELement.prototype.matchesSelector = HTMLElement.prototype.webkitMatchesSelector || HTMLElement.prototype.mozMatchesSelecvtor || HTMLElement.prototype.msMatchesSelector || HTMLElement.prototype.oMatchesSelector; } } else if (!Element.prototype.matchesSelector && Element.prototype.querySelectorAll) { Element.prototype.matches = Element.prototype.matchesSelector = function() { // exercise for reader to implement using .querySelectorAll, // though it pretty easy, and available online if you search } } 

Answer 2

You need to bind the event to the document root and check the event.target property. If it matches the given selector, then do something.

Example (assuming addEventListener )
Example. Match all elements with id test :

 var root = document.documentElement; root.addEventListener('click', function(event) { var target = event.target; // <-- Clicked element while (target && target !== root) { // Tree traversing if (target.id == 'test') { // <------ Matches selector // Do something. break; // Optional: Stop traversal, because a match has been found } target = target.parentNode; // Go up in the tree } }, true); 

Answer 3

live () function is a jquery library function

  .live( events, handler(eventObject) ) 

events: A string containing the type of JavaScript event, such as "click" or "keydown". Starting with jQuery 1.4, a string can contain several types of events, separated by spaces or custom event names.

handler (eventObject): function that executes when the event fires.

for your example, when you created li inside ul, you need to live to capture li, for example

 $('li').live('mouseover',function(){ alert('hello'); }); 

Answer 4

You can manually bind an event handler whenever you create a new element. Or you can do it exactly the way jQuery does by looking at the jQuery library and extracting the parts you need.