Event handler and added element example

Which event handler works on element added to the DOM.

by kanonji

HTML

<p>Which event handler works on element added to the DOM.</p>

<div id="parent">
    <button class="static">static</button>
</div>

<hr />

<div id="console"></div>

JavaScript

console.d = function(text){
    $('#console').append('<p>'+text+'</p>');
}
console.d.init = function(){
    $('#console').empty();
}

$('button').click(function(e){
    console.d("$('button').click() `." + e.target.textContent + '` clicked: ' + e.timeStamp);
});

$('button').on('click', function(e){
    console.d("$('button').on('click') `." + e.target.textContent + '` clicked: ' + e.timeStamp);
});

$('button').on('click', '', function(e){
    console.d("$('button').on('click', '') `." + e.target.textContent + '` clicked: ' + e.timeStamp);
});

$('#parent').on('click', 'button', function(e){
    console.d("$('#parent').on('click', 'button') `." + e.target.textContent + '` clicked: ' + e.timeStamp);
});

$(document).on('click', 'button', function(e){
    console.d("$(document).on('click', 'button') `." + e.target.textContent + '` clicked: ' + e.timeStamp);
});

// Add button to the DOM
$('button').after('<button class="added">added</button>');

// This is dump initializer.
// button.added is already exists.
$('button').mousedown(function(e){
    console.d.init();
});