Calling a Script when button clicked

StackOverflow https://stackoverflow.com/questions/4265776

Question

In a jquery mobile webpage, I would like to call a script defined within script tags in the HEAD section of the jsp.

<head>

    <link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
    <script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>

    <script>

        $("#button").click( function()
           {
             alert('button clicked');
           }
        );
    </script>

</head>

<body>
    <html:errors/>

    <div data-role="page" data-theme='a'>

      <div data-role="header">
        <h1>jquerymobile</h1>
      </div>

      <div data-role="content">
        <div id="button" data-role="button">Click on button</div>
      </div>

   </div>
</body>

When the Button is clicked, I want the alert to be shown. But nothing happens when the button is clicked.

Could someone tell me where I am going wrong?

EDIT1:

The following code brings up the alert in Firefox & Opera Desktop Browsers. 

  $(document).ready(function() {
      $("#vbutton").click(function() {
          alert("clicked");
      });
  });



  <a id="vbutton" data-role="button">Click Button</a>

Any reason why the same does not work with Opera Mobile & Fennec browsers - where it shows the Error Loading Page dialog??

Was it helpful?

Solution 2

The problem was due to debug statements like

debugger;

debug.info(....)

which were understood by Firefox/Firebug, but were causing problems in Fennec & Opera Mobile browsers.

OTHER TIPS

Your problem is that you are searching for $('#button') before it exists...

Try wrapping your jQuery code in a $(document).ready(function(){ ... }) or its shorthand alias jQuery(function(){})

The other option is to include your initialization of the click event on the button until AFTER the #button exists in the DOM. In other words, you can move your <script> tag to the bottom of the page and it should work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top