0

I already checked answers about click events fired twice. But I have a question about using .on().

Usually, I use it like this on dynamically added elements, and it always worked fine:

$(document).on("click", "dynElement", function(){})

In the current website I'm working on, I use it several times. But in the function that I'm trying to achieve, let's say, a dynamic "jump to page", click on page number is triggered twice:

$(document).on("click", ".jumpTo .number", function(){
    console.log("Jump");
});

Trying to find the origin of this behaviour, I tried this syntax that works fine:

$(".jumpTo").on("click", ".number", function(){
    console.log("Jump");
});

Can anyone explain what is the difference between these two different syntaxes (which look quite similar to me)?

And optionally, why is $(document).on("click", ".jumpTo .number", function(){}) triggered twice? (Optionally because I am not able to reproduce this behaviour in a Fiddle, everything works as it is supposed to).

JJJ
  • 32,902
  • 20
  • 89
  • 102
EdenSource
  • 3,387
  • 16
  • 29
  • 1
    Do any of these answers help you? http://stackoverflow.com/q/6731894/3132718 Most probably the one with `.unbind()`? – Al.G. Apr 15 '15 at 08:31
  • You are triggering a click on both selectors at the same time... – Shikkediel Apr 15 '15 at 08:33
  • @Al.G. , it helps, I check everything in these answers. But usually, I do not need to unbind() click events – EdenSource Apr 15 '15 at 08:36
  • So it helps or it solved your problem? – Al.G. Apr 15 '15 at 08:36
  • 3
    @Shikkediel That's completely false. `.jumpTo .number` means a child element of "jumpTo" with class "number". You're thinking about `.jumpTo, .number` (with a comma). – JJJ Apr 15 '15 at 08:37
  • 1
    If you are unable to reproduce this in a Fiddle then it must be something else that is causing this. Either provide more code or try to create a working Fiddle by slowly stripping parts from the existing code. – SaphuA Apr 15 '15 at 08:39
  • @Al.G. : that's not solving my problem. Still fired twice – EdenSource Apr 15 '15 at 08:40
  • @Shikkediel No, the HTML is like `
    ` so `.jumpTo .number` is correct. @EdenSource Maybe you call `.on()` twice on the same elements which will add two event handlers ...?     – devnull69 Apr 15 '15 at 08:40
  • @SaphuA : I 'll try to provide a better Fiddle. – EdenSource Apr 15 '15 at 08:41
  • @devnull69 : I promise I check this ;) – EdenSource Apr 15 '15 at 08:41
  • In your fiddle you are adding all sub elements at the same time. If (in your original code) you are adding them one by one and each time you call `on()` it will bind additional handlers each time – devnull69 Apr 15 '15 at 08:42
  • @devnull69: good Point, but there is only one call for `on()`, only content is updated without binding additional click handler – EdenSource Apr 15 '15 at 08:45
  • Do you, by any chance, create nested `.number` elements inside `.jumpTo`? In that case you should use `'.jumpTo > .number'` as a selector for .on() – devnull69 Apr 15 '15 at 09:15

1 Answers1

1
$(document).on("click", ".jumpTo .number", function(){
    console.log("Jump");
});

In this case the click handler is set on the document object. So whenever you click somewhere on the page, it will fire and look for a ".jumpTo .number" element inside it. If it finds it, it will check if the click was on it and your function will execute.

$(".jumpTo").on("click", ".number", function(){
    console.log("Jump");
});

Here the click handler will be on .jumpTo

As Al.G said probably this code gets executed multiple times, so you actually add that handler multiple times, hence the double firing. One way to solve it is to do something like this:

$(".jumpTo").unbind("click").on("click"...

Another is to change your code to make sure the .on() call doesn't get executed twice.

LachoTomov
  • 3,312
  • 30
  • 42
  • 2
    I'm pretty sure he's showing the two versions only as example. It fires twice on the first one, but works correctly when using the second. – SaphuA Apr 15 '15 at 08:43
  • @Lacho Tomov: Thanks for the explaination, I now know the difference between these 2 ways to handle `on()`. – EdenSource Apr 15 '15 at 08:47
  • If it fires twice only in the first case, this might be because there are multiple ".jumpTo .number" elements? Also make sure your html correctly validates, it acts strange if you have DOM errors, unclosed tags, etc. – LachoTomov Apr 15 '15 at 08:56
  • I just checked all html markup, nothing wrong on this side – EdenSource Apr 15 '15 at 09:10
  • As second case works for me, and Lacho Tomovgave gave me difference between these 2 click handlers, I'll mark my question as "solved". Just don't know why it is trigger twice for first case. Thank you all for helping. – EdenSource Apr 15 '15 at 09:18
  • @EdenSource you sure there isn't multiple instances of ".jumpTo .number" ? I really cannot think of any other reason why it would fire 2 times... What happens when you run that in the js console: $(".jumpTo .number").length ? Does it return 1 or more? – LachoTomov Apr 15 '15 at 10:29
  • Of course there is more than 1. As in the fiddle, there are 4 instances of ".jumpTo .number". But in the fiddle, console.log return only one "Jump" each click. In my own project, there are 2 "Jump" each click. – EdenSource Apr 15 '15 at 10:32
  • Right, sorry I didn't see the fiddle... One last thing I can think of: console.log('check'); $(document).on("click", ".jumpTo .number", function(){ console.log("Jump"); }); This 'check' is printed only once in console, right? I know it's a dumb check, but really cannot think of anything else... – LachoTomov Apr 15 '15 at 10:45