Listen DOM Changes using jQuery

Check if a DIV node has changed then executes a function accordingly.

by Fahd Murtaza

HTML

<a href="#">Create Alert</a>
<div class="document"></div>

CSS

.document {
    margin: 1em;
    padding: 1em;
    background: #efefef;
}
#result {
    background: #333;
    color: #efefef;
    padding: 1em;
    text-align: center;
}

JavaScript

// Ignore this it's just there to dynamically add a div to DOM
$(document).ready(function(){
    $('a').click(function(){
        $('.document').html(
            '<div id="result">This is a message</div>'
        );
    });
});
function hideMsg(){
    // Hide dynamically added div
    setTimeout(function(){ 
          $('#result').slideUp(500);  
    }, 5000);
}
// Listen DOM changes
$('.document').bind("DOMSubtreeModified", hideMsg);