Dynamic Event Handling

Catch event on DOM element after added page ready.

by klenwell

HTML

<h2>
Dynamic Event Test
</h2>
<div class="button-parent">
  <h3>
    Button Parent
  </h3>
  <p>
  Button will be added after 3 seconds.
  </p>
</div>

JavaScript

var EVENT_DELAY = 3000;

$(document).ready(function() {
  console.log('Document is ready.');
});

setTimeout(function() {
  console.log('Time to add button.');
  addButton();
}, EVENT_DELAY);

function addButton() {
  $button = $('<button>Magic Button</button>');
  $('.button-parent').append($button);
}