JQuery: On Keyword for clickable elements added after DOM is loaded

If you are doing something such as dynamically appending li’s to an unordered list but you also wanted to have a remove button, we can do this using the .on() keyword. Take for example the following unordered list and button:

<ul id="ullist">
  <!-- dynamically added li elements -->
</ul>
<button id="add">Add Item</button>

To handle click events for elements added after the DOM is loaded, use:

$(document).on('click', '#ullist li .remove', function() {
    // Remove the clicked item
    $(this).closest('li').remove();
});

$('#add').on('click', function() {
    $('#ullist').append('<li>New Item <span class="remove">Remove</span></li>');
});

This ensures that even dynamically created elements will have the click event bound.

---

Posted in: Javascript, JQuery / Tagged: JQuery

---

Note: This post was salvaged from my old blog at netawakening.azurewebsites.net via the Wayback Machine.