How to bind jQuery events on elements generated through other events?


Use the jQuery on() method to bind jQuery events on elements generated through other events. You can try to run the following code to learn how to use on() method to bind jQuery events:

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

     $(document).on({
       mouseenter: function (e) {
         alert('mouse enter');
       },
       mouseleave: function (e) {
         alert('mouse leave');
      }          
}, '.demo');

});
</script>
</head>
<body>

<h1>Heading 1</h1>
<div class="demo" id="d1">Demo One</div>
<div class="demo" id="d2">Demo Two</div>
<p>Mouse enter and leave will generate alert boxes.</p>
</body>
</html>

Updated on: 14-Feb-2020

147 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements