uibutton - jquery mobile add click event on nested button -
i have nested buttons , im trying add click events on seems not working.
this object
<div id="ui-50"> <div class="ui-rpc" data-role="controlgroup" data-type="horizontal" > <input type="button" id="rpc-bor" value="<<" /> <input type="button" id="rpc-back" value="<" /> <span style="margin:3px"></span> <input type="text" id="rpc-jump" value="" /> <input type="button" id="rpc-next" value=">" /> <input type="button" id="rpc-eor" value=">>" /> <span style="margin:20px"></span> <label id="rpc-current" >0</label> <label id="rpc-separator" >/</label> <label id="rpc-total" >0</label> <span style="margin:20px"></span> <label id="rpc-rpp" >0</label> </div> </div>
im trying add click event on id="rpc-eor" button using
$("#ui-50 .ui-rpc #rpc-eor").click(function(){ alert("yay!"); });
but event wont fire. matter? please help! in advance
i seeing console.log
output expected in demo ran in chrome, using jquery.mobile 1.0b1
<!doctype html> <html> <head> <title>page title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div:jqmdata(role='page')").live('pageshow',function(){ $("#ui-50 .ui-rpc #rpc-eor").click(function(){ console.log("yay!"); }); }); }); </script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>header</h1> </div> <div data-role="content"> <div id="ui-50"> <div class="ui-rpc" data-role="controlgroup" data-type="horizontal" > <input type="button" id="rpc-bor" value="<<" /> <input type="button" id="rpc-back" value="<" /> <span style="margin:3px"></span> <input type="text" id="rpc-jump" value="" /> <input type="button" id="rpc-next" value=">" /> <input type="button" id="rpc-eor" value=">>" /> <span style="margin:20px"></span> <label id="rpc-current" >0</label> <label id="rpc-separator" >/</label> <label id="rpc-total" >0</label> <span style="margin:20px"></span> <label id="rpc-rpp" >0</label> </div> </div> </div> </div> </body> </html>
note: there no document.ready()
jquery.mobile if have wrapped jquery in just document.ready()
might causing problem. better bind on $("div:jqmdata(role='page')").live('pageshow',...);
guarantee page ready. said, in simple case still works without .live
bind.
Comments
Post a Comment