Event handling is the basic need to develop Rich Internet Web Applications and that will become very tough with elements added to DOM dynamically.
Jquery gives simple solution to do event binding for dynamic elements under a DOM object.
The .on() method provides several useful features.
$( "p" ).on( "click", function() { console.log( "was clicked" ); });
Suppose you want to trigger the same event whenever the mouse hovers over or leaves the selected elements.
Here we need to use "mouseenter mouseleave"
$('div').on('mouseenter mouseleave', function() { console.log('mouse hovered over or left a div'); });
Suppose that instead you want different event handlers for when the mouse enters and leaves an element.
if you want to show and hide a tooltip on hover, you would use this.
.on() accepts an object containing multiple events and handlers.
$( "div" ).on({ mouseenter: function() { console.log( "hovered over a div" ); }, mouseleave: function() { console.log( "mouse left a div" ); }, click: function() { console.log( "clicked on a div" ); } });
$( "body" ).on( "click", "p", function() { alert( $( this ).text() ); });
It will be executed for all the p tags in body tag no matter if you add few dynamically.
Ref: http://api.jquery.com/on/
Micropyramid is a software development and cloud consulting partner for enterprise businesses across the world. We work on python, Django, Salesforce, Angular, Reactjs, React Native, MySQL, PostgreSQL, Docker, Linux, Ansible, git, amazon web services. We are Amazon and salesforce consulting partner with 5 years of cloud architect experience. We develop e-commerce, retail, banking, machine learning, CMS, CRM web and mobile applications.
Django-CRM :Customer relationship management based on Django
Django-blog-it : django blog with complete customization and ready to use with one click installer Edit
Django-webpacker : A django compressor tool
Django-MFA : Multi Factor Authentication
Docker-box : Web Interface to manage full blown docker containers and images
More...