jQuery click event not firing in jQueryMobile -
using jquery jquery-1.9.1.js , jquerymobile 1.3.1 (chrome 26/windows 7) cannot see why 1 of these 'click' events bound #one1 fires , other doesn't:
html:
<div data-role="page" id="one" data-theme="a"> <div data-role="header" data-position="inline"> <h1>one</h1> </div> <div data-role="content" data-theme="a"> <a href="#" id="one1">[one]</a> <a href="#two">two</a> <a href="#three">three</a> </div> </div> javascript:
<script> $(document).on( "mobileinit", function() { $(document).on('click', '#one1', function(e){ console.log('firing'); }); $('#one1').on("click", function() { console.log('not firing'); }); }); </script> when run in jsfiddle both events fire when not wrapped in "mobileinit" event: http://jsfiddle.net/9nrwa/
what missing here?
intro
first thing first, mobileinit event should not used event binding. while can used mobileinit not created purpose. created jquery mobile parameter auto-initialization, should not used event binding.
correct way use proper page events pageinit. more information page events take @ other answer covers various jquery mobile page events , difference towards usual jquery document ready paradigm: jquery mobile: document ready vs page events.
not let me answer question. events click can bound in few different ways. lets @ examples have used:
various ways of event binding jquery
first example
$(document).on('click', '#one1', function(e){ console.log('firing'); }); this first example new came use first deprecated method live. it's event delegation mechanism allows bind event handlers not existing instances of given node type, future instances of given node type (by "type" mean set of dom nodes matched given jquery selector). want here is, during event binding element don't need exist in dom, method works binding event handlers document , reacting events bubble through dom. doesn't matter if element #one1 exist or not during event binding. can create dynamically later , still work.
second example
$('#one1').on("click", function() { console.log('not firing'); }); this on old way of event binding. requires event exists in dom before event can bind. in case trying bind click event element didn't exist in dom @ point in time. doesn't matter loaded after binding process.
working example
jsfiddle example: http://jsfiddle.net/gajotres/qmnsa/
take @ example. there see 5 different ways of click event binding in jquery mobile:
- 2 click event bound in head, before page initialized dom
- 2 click events bound in head in pagebeforeshow event, delegation of binding because event bound when page shown , inside dom
- 1 click event bound in body after page content. because content loaded inside dom @ point click event work.
html :
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script> $(document).on('click', '#one1', function(e){ // example work because bind event delegation process console.log('firing 1'); }); $('#one1').on("click", function() { // example not work because event not exist in moment console.log('not firing'); }); $(document).on( "pagebeforeshow", function() { // example work because bind event delegation process $(document).on('click', '#one1', function(e){ console.log('firing 2'); }); // example work because element exist in dom during pagebeforeshow event $('#one1').on("click", function() { console.log('firing 3'); }); }); </script> </head> <body> <div data-role="page" id="index"> <div data-theme="b" data-role="header"> <h1>index page</h1> </div> <div data-role="content"> <a href="#" id="one1" data-role="button">[one]</a> </div> </div> <script> $('#one1').on("click", function() { // example work because binding when element loaded dom console.log('firing 4'); }); </script> </body> </html> conclusion
- do not use mobileinit event event binding, trigger before page loaded dom , events bind delegation work.
- bind events in correct jquery mobile page events.
usefull links regarding topic:
jquery live() method , event bubbling
while live method deprecated on method should used instead. in benchmarks on method 2x faster.
- various jquery mobile page events
- what “event bubbling” mean?
Comments
Post a Comment