JQueryMobile listen click

Question

I am trying to understand the page events in jQueryMobile navigation, but I found some very weird behaviour, as some event handlers get called several times:

I have two pages: home.html and disclaimer.html. Both contain the same header:

<head>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/events.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>

On the page home.html is a link:

<section data-role="page" id="home">
    <a href="#" id="test">Test</a>
</section>

And in the file events.js is the following code:

var i = 0;

$(document).on('pageinit', 'section#home', function(event) {
    console.log(i++, 'pageinit');
    $('a#test').on('click', function() {
        console.log(i++, 'click pageinit');
    });
});

$(document).on('pagebeforeshow', 'section#home', function(event) {
    console.log(i++, 'pagebeforeshow');
    $('a#test').on('click', function() {
        console.log(i++, 'click pagebeforeshow');
    });
});

Then I do the following steps:

Navigate to home.html (http)
Click the link
Go to disclaimer.html (ajax)
Go to home.html (ajax)
Click the link

With the following console output:

0 "pageinit"             // step 1
1 "pagebeforeshow"
2 "click pageinit"       // step 2
3 "click pagebeforeshow"
4 "pagebeforeshow"       // step 4
5 "click pageinit"       // step 5
6 "click pagebeforeshow"
7 "click pagebeforeshow"

Makes sense, right? But now the weird part. When I change the order in which I visit the pages: the behaviour changes.

Navigate to disclaimer.html (http)
Go to home.html (ajax)
Click the link
Go to disclaimer.html (ajax)
Go to home.html (ajax)
Click the link

Console output:

0 "pageinit"             // step 2
1 "pagebeforeshow"
2 "click pageinit"       // step 3
3 "click pagebeforeshow"
4 "pageinit"             // step 5
5 "pagebeforeshow"
6 "click pageinit"       // step 6
7 "click pagebeforeshow"

Which is weird, because I would expect the 6th and 7th result to have been duplicated.

Sorry for the very long question. I hope someone can explain to me exactly what is happening and if this is expected behaviour?

tldr; Where do you listen for (click) events in jQueryMobile?

I'm not sure what you're trying to accomplish. `$(selector).click()` is a way to listen for Click events. — Twisty, Dec 07 '12 at 01:46
in your first case only the "click pagebeforeshow" gets fired twice in the end, not the "click pageinit" ? — Romain, Dec 07 '12 at 10:01
@Twisty I just built this test case to understand the behaviour. Besides, `$(selector).click()` and `$(selector).on('click')` are [the same](http://stackoverflow.com/a/9122124/478658). @Romain Yes exactly — Sebastian, Dec 07 '12 at 14:44
Ok, yeah, they are the same. With JQM, there is a good chance of seeing extra event behavior since it has a lot of stuff for Tap, TapHold, Slide, etc. — Twisty, Dec 07 '12 at 18:56

Roimer · Accepted Answer · 2012-12-08T01:54:50.653

In short: in jQueryMobile you should listen (bind) your events inside pageinit; this is equivalent (more of less) to jQuery's ready event. And it is what the jQueryMobile's guys recommend.

pageinit is triggered once the page has been loaded and initialized (via AJAX or HTTP), but pagebeforeshow may be triggered more than once if the page is already in the DOM, for example after closing a jQueryMobile dialog. Whatever you bind on pagebeforeshow is going to be rebind again every time the page is showed again. That is why you have two click pagebeforeshow.

EDIT: Explanation of your tests

I replicated your 2 html pages and js file and repeated all the steps in both tests.

In your first test you have:

Navigate to home.html (http): It binds (by delegating on document) and triggers pageinit and pagebeforeshow (logs 0 and 1) because your page was initialized and was going to be shown. this also binds the oter two functions to the link (important: in this case is not delegation, but a direct bind!). This is the only time in this test in which "events.js" is going to be loaded and executed.
Click the link: this executes both click pageinit and click pagebeforeshow as expected (logs 2 and 3) because step 1.
Go to disclaimer.html (ajax): this doesn't show any log.
Go to home.html (ajax): since "home.html" is still in the DOM this triggers pagebeforeshow, as you can see in log (4). This executes too the binding in the link. NOTE: I suspect that at this step "disclaimer.html" was remove from DOM (more on this in second test).
Click the link: shows tree logs, the first 2 because step 1, and the last (duplicated) because step 4.

In your second test you have:

Navigate to disclaimer.html (http): It binds pageinit and pagebeforeshow, but doesn't show a log since none of the event is being triggered; both events are being bind to document (by delegation), so it doesn't matters if the specific page isn't yet in the DOM. This is the only time in this test in which "events.js" is going to be loaded and executed.
Go to home.html (ajax): It triggers pageinit and pagebeforeshow and you can see logs 0 and 1. When both events are triggered, the corresponding click events are being bind to the link (a direct bind!)
Click the link: This step shows logs 2 and 3, as expected.
Go to disclaimer.html (ajax): Nothing is shown in the log... but: jQueryMobile decided that "home.html" should be removed from DOM! that is because JQM removes every page once you navigate to another one. Note that "disclaimer.html" is not going to be removed from the DOM ever, since he is the "owner" of it.
Go to home.html (ajax): this step triggers pageinit and pagebeforeshow (since both events are still bind to the document object) as you can see in logs 4 and 5. This binds the two functions to the link, just as in step 2, but... (see next step)
Click the link: Here is where you said "I would expect the 6th and 7th result to have been duplicated"; well they weren't duplicated because the whole page (the div containing the link) and all its content where removed from the DOM, and the first click events you bind directly to the link (in step 2) are gone! so you see only the logs caused by the bind in step 5.

If I (finally) understood how JQM events work, the first page loaded (via full HTTP request) is kept in the DOM until the user navigate to an external page or reload the page (via F5 or CTRL+R). Any other page (loaded via AJAX) is added to the "main" DOM and then unloaded/deleted from it when you navigate to another one. So: if you do all your binds in pageinit (direct binds or at most delegating to its parent div[data-role:page]) you won't need to worry about duplicated event binds.

PD: If you note something weird in how I write, is probably because I'm not used to speak/write in English in passive voice, and sometimes I mix up prepositions :P

Thank you, very clear answer. But then I still don't understand why in the second test case I don't get two *click pageinit* and two *click pagebeforeshow*? — Sebastian, Dec 07 '12 at 14:50
How did you open "home.html" in step 3 (second test)? It looks like "home.html" was loaded again, as if you typed the url in the address bar or pressed the browser's back button): That is the only explanation I can think of for the 'pageinit' in theline 4 (step 5) in the console: Your JS file is on the header, so It can only be executed when loading a page throw a full http request (not ajax). — Roimer, Dec 07 '12 at 23:26
The pages contain a link to each other, which I clicked each time, except of course the first time. These are all ajax requests (I have not changed any $.mobile setting) — Sebastian, Dec 07 '12 at 23:50
@Sebastian thanks for your question! I finally had the time to test and understand how `pageinit` and `pagebeforeshow` work together :) next week I'm going to fix a couple of script at the office. — Roimer, Dec 08 '12 at 01:56

JQueryMobile listen click

1 Answers1

EDIT: Explanation of your tests

Linked