javascript - JQueryMobile buttons and clicking -


what correct way bind click / vclick event button in jquerymobile?

i've tried using $().bind("click", function(){}); , $().on("click", function(){});but never got response console.

i have buttons set in index.html:

edit

 <div data-role="page" data-title="onestop mobile" class="ui-responsive-panel" id="homepage">             <div data-role="panel" data-dismissable="false" id="optionspanel">         <div>             <ul data-role="listview">                 <li> <a href="#" id="store">store</a>         </li>                      <li> <a href="#" id="download">download</a>   </li>                 <li> <a href="#" id="check">check</a>         </li>                 <li> <a href="#" id="clear">clear</a>         </li>             <ul>               </div>     </div> </div> 

and i'm binding in index.js:

$("#store").bind("click", function(event, ui) {     console.log("work damnit!") }); 

this should work, according jqmobile api , demo pages, never see happen on device or in browser.

your problem @ time binding event element binding not yet part of dom.

you need either make sure when binding event element part of dom calling function in ready event or pageinit of jqm page, or can use event delegation calling overloaded version of .on function.

for example

binding during pageinit event (this uses event delegation bind pageinit event).

//passing in selector second parameter calls overloaded version of .on $(document).on('pageinit', '#mystorepage', function() {    $("#store").bind("click", function(event, ui) {       console.log("this should work!")    }); }); 

using .on event delegation

$(document).on('click', '#store', function() {  console.log('this should work!'); }); 

note way event delegation works binding event existing higher level element , when event bubbles checking selector. in general want bind event close element checking possible, can go way document if necessary.

as side note omar mentioned using first method provided .bind work .on. of jquery 1.7 .bind delegates .on preferred (.bind left in backwards compatibility)..


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -