jQuery on() method with click and element class name triggerred anywhere on the page

Question

Recently I've upgraded jQuery to 1.9 and my main problem now is to convert all live() methods to on().

I've succeeded in a few situation, but I have some other methods that just behave very strange.

Take the following as an example:

$(document).on('click', '.clickReplace', function(e) {
     e.preventDefault();
     ...
});

The class 'clickReplace' can be assigned to either 'a', 'span' or 'div' tag and it might be added to the DOM after ajax call (dynamically).

When I use the above, every click on any of the links on the page that doesn't have this class assigned triggers the e.preventDefault() - I cannot navigate between the pages - as if it was binded to the 'document' rather than the element within the document tree with the specified class.

Any idea what might be causing it and what should I do to make it work?

Did you check in the debugger that your problem is related to **this** handler ? — Denys Séguret, Jan 30 '13 at 08:21
jQuery is behaving exactly as it should, if you don't want it to fire make your selector more specific, or remove the class from the links you don't want to bind this event to. — Tom Walters, Jan 30 '13 at 08:22
It's triggered with elements that don't have this class assigned - meaning absolutely any element - even if I click on the body of the page. In the console I can see that the $_GET call is made to the current document with each click. — Spencer Mark, Jan 30 '13 at 08:25
since this is a simple everyday use of `.on` and nothing obviously wrogn with the selector, this is unlikely the source of your problem — Rune FS, Jan 30 '13 at 08:27
You must be doing something else wrong. This does not target "every click on the page", but clicks on elements of class `.clickReplace` only. — Tomalak, Jan 30 '13 at 08:34

score 1 · Accepted Answer · answered Jan 30 '13 at 08:39

My sincere apologies to everyone - you're absolutely right - there was something different that was causing this behaviour and it was the fact that I was passing the object with the class rather then the class name as the second argument (as it's a method inside of the object literal, which was called externally with the parameter indicating which element should be triggered).

I had it this way, which is obviously not going to work:

$(document).on('click', $('.clickReplace'), function(e) {

Thanks everyone for participating.

fmsf · Answer 2 · 2013-01-30T09:03:33.467

0

You should be careful when using e.preventDefault(). You are effectively halting the bubbling of the click event on the link from reaching the browser, which is what causes your links to stop responding.

Reply to comment - Using on is equivalent to doing this:

$(document).click(function(e){
   if($(e.target).parents(".clickReplace").length>0){
      // run your code
   }
});

It will not run on elements that you didn't binded them to, so the issue is not here

edited Jan 30 '13 at 09:03

answered Jan 30 '13 at 08:27

fmsf

36,317
49
147
195

but why is it triggered when the event is binded to the element with the specific class within the document - not to any element? – Spencer Mark Jan 30 '13 at 08:33

jQuery on() method with click and element class name triggerred anywhere on the page

2 Answers2