<\/span><\/h2>\n\n\n\njQuery provides a simple yet powerful function on() that allows you to easily add event handlers to dynamic elements, using event delegation. Here is its syntax.<\/p>\n\n\n\n
$(static_ancestor).on(event, element, function() {});<\/pre>\n\n\n\nThe above on() function is called on a static ancestor of the dynamic element. It accepts 3 arguments – event name, selector for dynamic element and the event handler function. Here is an example to add ‘on hover’ event to the dynamic list item that displays an alert box with ‘hello’ message. For this purpose, add the following line to <script> tag.<\/p>\n\n\n\n
$('#links').on('click', 'li', function() {alert('hello')});<\/pre>\n\n\n\nHere is the full code.<\/p>\n\n\n\n
<html>
<head><script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"> <\/script><\/head>
<body>
<ul id=\"links\">
<li class=\"static-link\">Static List item<\/li>
<\/ul>
<\/body>
<script type=\"text\/javascript\">
\/\/ Create the new element
var ul=document.getElementById('links');
\tvar li = document.createElement('li');
\tli.className = 'dynamic-link'; \/\/ class name
\tli.innerHTML = 'Dynamic List Item'; \/\/ inner text
\tul.appendChild(li); \/\/ append element
\t
\t$('#links').on('click', 'li', function() {alert('hello')});<\/strong>
<\/script>
<\/html><\/pre>\n\n\n\nNow, when you click any of the list items – static or dynamic, it will show an alert box with ‘hello’ message. If you want to add event handler only to dynamically added list item, you will have to customize your selector to select only those list items as shown below. Here is an example where we have only added class name selector for list item, instead of specifying list item tag in selector. This will select only the dynamic list item and not the static one.<\/p>\n\n\n\n
$('#links').on('click', '.dynamic-link'<\/strong>, function() {alert('hello')});<\/pre>\n\n\n\nIf you are unable to find a stable ancestor to your dynamic element, you can call on() function DOM elements like document or body which represent the full page.<\/p>\n\n\n\n