python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
ajax jquery example post

jQuery .click() vs .on() methods for adding a click event

The .click() events are only attach to fully loaded elements and can't use for dynamic added elements and utilize more memory and create event handler for each child. The .click () requires to event handler for all element which are attached and its produce the overhead at time of DOM manipulation.

The .on() events are used for both dynamic added elements and it’s consume less memory then .click () events. It allows creating the event handler which elements are added dynamically ways.

The .on() will work for current and future elements and it a replacement of the bind(), live() and delegate() methods.

The example as
//For .click() event example:

//HTML code
<ul id="click">
    <li>List items</li>
</ul>

//For on() event example:

//HTML code
<ul id="on">
    <li>List items</li>
</ul>

//JavaScript code
$('#click li').click(function () {
    $(this).parent().append($('<li>New List items</li>'));
});

//JavaScript code
$('#on').on('click', 'li', function () {
    $(this).parent().append($('<li>New List items</li>'));
});

//For more detail, you can go below link.
 http://jsfiddle.net/AJRw3/


The output looks like,

ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions