jquery .click not working = jquery .on(click...) working fine

Question

A couple of weeks ago I was working on my project and wrote some code to make a table row clickable (been there, done that). This code had been used before without a problem. A day was wasted trying to get the code to work (even though I had done it multiple times before) - some of the things I tried to get it working were a - change id to class on everything, b - move code from bottom of script section to top, c - rename variables, d - add 'var' in front of variables, subtract var from in front of variables, e - change all single quotes to double quotes, change all double quotes to single quotes, f - change the name of the table, g - try to click the table instead of the row, h - put the table in a div, take the table out of a div, etc etc etc.

Nothing was successful, so as a last resort, late at night, I switched the .click to .on(click - and surprise surprise - everything worked fine.

The same thing happened yesterday, but instead of doing a - h , I jumped right to changing the .click to on(click.

Here are the two code snippets:

$("#mdtable tr").click(function() { 
    var localmdid = $(this).find("#mdid").html();
    alert("mdid =" + localmdid);
});

$(document).on('click', '#mdtable tr', function(e) {
    var localmdid = $(this).find("#mdid").html();
    alert("mdid =" + localmdid);
           });

The upper one NEVER works, the lower one ALWAYS works (I comment them in and out).

Here is a code snippet from another page that works just fine:

$("#patienttable tr").click(function() {
       var passthis = $(this).find("#localid").html();
       $.post("php/setsessionvariable.php",
              {sessionval: passthis},
              function(e) {window.location.href = "root.php"}
              );
});

I've read the jQuery documentation and it says that the .click function is somehow directly related to the .on(click, and therefore to me, if one works, then other should work.

Being a noob, I would like to become a better programmer, and even though my code works with .on(click, I'd like to know why my .clicks don't work (an intellectual exercise).

So my questions are:

Are .click and .on(click really related?
Is there something obvious I'm missing in the click snippet that makes it non-functional?
Is there a different way to this about this issue?

Again, I thank you in advance

api.jquery.com/on Read the bit about direct and delegated events. — James Montagne
– James Montagne, Commented Jul 16, 2013 at 13:57
$('foo').click(...) is equivalent to $('foo').on('click, ...). But you are using a different selector/element to bind the handler to (#mdtable tr in the first case, document in the second), so they are not equivalent in your case. You are making using of event delegation which is explained well in the jQuery learning center: learn.jquery.com/events/event-delegation. — Felix Kling
– Felix Kling, Commented Jul 16, 2013 at 13:58
@roasted - I'm pretty sure I know the answer, I just want confirmation from the OP. — j08691
– j08691, Commented Jul 16, 2013 at 13:58
@Kathiravan That is patently wrong. The distinction isn't between click() or on(), it's whether or not the event is delegated. on() allows you to create direct and delegated events, where click() only allows the former. — millimoose
– millimoose, Commented Jul 16, 2013 at 14:01

Adil · Accepted Answer · 2013-07-16 13:56:45Z

5

The .click will bind click event to elements that are present at that time in the DOM whereas the on() will delegate the event and will bind the click (event) which are dynamically added later on.

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, Reference.

answered Jul 16, 2013 at 13:56

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Montagne Over a year ago

More specifically, in the code supplied, on is binding the event to document. The events aren't added later.

TimSPQR Over a year ago

Yes...that's my problem...as noted above, the stuff that is not working is loaded by a click and ajax call AFTER the DOM is loaded. Thanks VERY much!

Collectives™ on Stack Overflow

jquery .click not working = jquery .on(click...) working fine

Here are the two code snippets:

1 Answer 1

Delegated events

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Here are the two code snippets:

1 Answer 1

Delegated events

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related