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 in Web Development by gaurav
• 18,960 points
32 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 by rajatha
• 7,440 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 in Web Development by gaurav
• 18,960 points
23 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 in Web Development by gaurav
• 18,960 points
1,248 views
0 votes
0 answers

JQuery use variable by name of divID

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

Jul 19 in Web Development by gaurav
• 18,960 points
21 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 in Web Development by gaurav
• 18,960 points
40 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,510 points
334 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,780 points
9,373 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,780 points
16,592 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,780 points
1,440 views
0 votes
1 answer

Why use jQuery on() instead of click()

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

answered Jun 27 in Web Development by rajatha
• 7,440 points
26 views
0 votes
1 answer

Pure JS equivalent of Jquery eq()

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

answered Jun 23 in Web Development by rajatha
• 7,440 points
89 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