Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The problem is that you're not binding your <code>on</code> listener in the right place, you are declaring in a <code>pageinit</code> handler for <strong>ANY</strong> page to add your<code>on</code> listener to the li:<code>$("div#home").on('click','li', function() { console.log('click') });</code></p> <p>Thus you are attaching one listener on the <code>div#login</code> page and attaching a redundant 2nd listener on the second <code>div#home</code> page. When you click the <code>li</code> one event is fired to two listeners and you get the two clicks.</p> <p>What you should be doing is in your <code>$(document).on('pageinit', function()</code> wrap your on listener declaration in a conditional that checks which page you're on:</p> <pre><code>if ($(this).attr(id') === 'home'){ $("div#home").on('click','li', function() { console.log('click') }); } </code></pre> <p>That's the simple solution, what you really should be doing is branching your code based on which page fired the <code>pageinit</code> event and calling the correct code based on it. See: <a href="https://stackoverflow.com/questions/10538718/jquery-mobile-pageinit-pagecreate-not-firing/10542821#10542821">my guide on structuring jQM Apps</a>.</p> <p>The gist of it is attach a data attr to your <code>div[data-role=page]</code> etc that describes your page then call separate code for each page. <em>(instead of using the ID like in this example, because you can easily have more than one instance of a page in multi-page jQM apps)</em></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload