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

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -