How to apply live() like feature for JavaScript appended DOM elements

Question

How to apply live() like feature for JavaScript appended DOM elements?

Like a li list inside ul which is added through JavaScript. I need to do this in plain JavaScript.

Answer 1

Since .live() is simply event delegation, place your handler on the nearest element to the ones being 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
    }
};

This is also similar to .live() in the sense that it searches from the e.target up to the container with the delegate to see if it is your targeted element.

Just testing the e.target itself isn't enough if the li has descendants.

---

For more complex analysis of the elements, you could use .matchesSelector, though you'd need to stick it on the HTMLElement.prototype under the correct name, since most browsers include it as an extension.

Also, you'd need a patch for IE8, but that's pretty 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's pretty easy, and available online if you search
        }
}

Answer 2

You have to bind an 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

the live() is a function of jquery library

  .live( events, handler(eventObject) )

events: A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names.

handler(eventObject): A function to execute at the time the event is triggered.

for your example, when you created the li inside the ul, you have to you live to capture the li,e.g,

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

Answer 4

You can manually attach the event handler whenever you create a new element. Or, you can do it exactly how jQuery is doing it by looking into the jQuery library and extracting the parts you need.