ajax jquery example post

jQuery click vs on events

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.

It is produce the overhead at time for DOM manipulations.

The .on() events are used for both dynamic added elements and its 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 over click() vs. on() in details as given below,

For .click() events :-

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

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

For on() events :-

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

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

Live Actions,

I hope it is very helpful to you! Thank you!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.