Why use jQuery on instead of click

0 votes

Currently with jQuery when I need to do something when a Click occurs I will do it like this...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

I was looking at some code someone else has on a project and they do it like this...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Notice it seems to do the same thing as far as I can tell except they are using the live() function which is now Deprecated and jQuery docs say to use on() instead but either way why use live/on() instead of my first example?

Aug 1, 2022 in Web Development by gaurav
• 23,260 points
1,382 views

1 answer to this question.

0 votes

on() differs from . click() in that it has the ability to create delegated event handlers by passing a selector parameter, whereas . click() does not.

Because you might have a dynamically generated elements (for example coming from an AJAX call), you might want to have the same click handler that was previously bound to the same element selector, you then "delegate" the click event using on() with selector argument

on() can also be synonymous with click() if you don't have a selector specified:

$('.elementClass').click(function() { // code 
});

is synonymous with

$('.elementClass').on('click', function() { // code
});

In the sense that it only add the handler one time to all elements with class elementClass. If you have a new elementClass coming from, for example $('<div class="elementClass" />'), the handler won't be bound on that new element, you need to do:

$('#container').on('click', '.elementClass', function() { // code
});

Assuming #container is .elementClass's ancestor

answered Aug 1, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
0 answers

Using jQuery to countdown from 90 seconds beginning on the click of an element

Hi I was wondering if anyone can ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
534 views
0 votes
0 answers

scroll up and down a div on button click using jquery

I am trying to add a feature ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
8,159 views
0 votes
0 answers

JQuery use variable by name of divID

Just a quick question, that I cannot ...READ MORE

Jul 19, 2022 in Web Development by gaurav
• 23,260 points
1,076 views
0 votes
0 answers

Getting the source of this click event in JQuery

I have multiple dynamically created buttons with ...READ MORE

Jul 21, 2022 in Web Development by gaurav
• 23,260 points
1,151 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,343 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
15,804 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
23,350 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
3,335 views
0 votes
1 answer

Why use jQuery on() instead of click()

The . on() method attaches event handlers to ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
450 views
0 votes
1 answer

Pure JS equivalent of Jquery eq()

To get the element index in the ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
1,410 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP