jQuery .on ex

by gavinfoley

HTML

With click():<br/>
<ul id="click">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

<br/><br/>

With on():<br/>
<ul id="on">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

JavaScript

$('#click li').on('click',function() {
    $(this).parent().append('<li>Dynamic list item. You can\'t click me :( </li>');
});
    
    
$('#on').on('click', 'li', function() {
    $(this).parent().append('<li>Dynamic list item. Click me to add more!</li>');
});

function onElementInserted(containerSelector, elementSelector, callback) {

    var onMutationsObserved = function(mutations) {

        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                var elements = $(mutation.addedNodes).find(elementSelector);
                console.log(mutation);
                for (var i = 0, len = elements.length; i < len; i++) {
                    callback(elements[i]);
                }
            }
        });
    };

    var target = $(containerSelector)[0];
    
    console.log('---', target)
    var config = { childList: true, subtree: true, characterData: true };
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);    
    observer.observe(target, config);

}

onElementInserted('body', 'ul#on', function(element) {
    console.log('yes');
});