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

jQueryWeb DevelopmentFront End Technology

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>
raja
Published on 20-Dec-2017 13:09:23
Advertisements