Why do I have to refresh my page for a javascript function to work?

Question

I'm developing a mobile site and using jQuery.

When I load a certain page and click the desired button, the code does not execute until I refresh the page. Why is this ?

Here's how I have it

script.js

$(document).ready(function() 
{ 
  $("#user-save").click(
      function(e)
       {
         alert(/clickity-click/);
       });
});

page.php

<html>
   <head>
       <!-- Other jQuery files here -->
      <script src="script.js"></script>
   </head>
<body>
   <div id="user-save" data-role="button">Click me like a boss</div>
</body>
</html>

Even on Internet Explorer 7 the behavior is the same. IE7 which allows popups by default. — TheRealChx101, Sep 22 '12 at 01:39

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

JQuery Mobile loads pages differently from a 'normal' javascript application. You will typically need to bind to the pageinit event instead of document.ready.

See this previous SO discussion on this topic

edited May 23 '17 at 12:04

Community

1
1

answered Sep 22 '12 at 02:18

GreyBeardedGeek

29,460
2
47
67

score 3 · Answer 2 · edited May 22 '13 at 02:19

I spent several hours rewriting the code on a page that was having this problem, only to realize that the problem was related to the linking/previous page.

The anchor tag and link on the linking/previous page, the one that leads to the page where you would like to ensure $(document).ready(init) will run, needs to have to include data-ajax="false" attribute like this:

<a href="yourpage.html" data-ajax="false">

This will ensure that JQuery Mobile doesn't expect that you're loading content dynamically with AJAX, and you are in fact navigating to a different/new page. In other words, JQuery Mobile will only run the $(document).ready() if it is loading a different/new page.

Thanks. The question was already answered by @GreyBeardedGeek — TheRealChx101, May 22 '13 at 03:18

score 0 · Answer 3 · answered Sep 22 '12 at 01:37

0

change in these lines:

<script type='text/javascript' src="script.js"></script>
alert('clickity-click');

answered Sep 22 '12 at 01:37

Teena Thomas

5,139
1
13
17

I think this does not matter. :) – TheRealChx101 Sep 22 '12 at 01:45
Wait. Is it because the page is originated from another page? – TheRealChx101 Sep 22 '12 at 02:00
you would need to define the function as global. here's a helpful link http://stackoverflow.com/questions/4335069/calling-a-javascript-function-from-another-js-file – Teena Thomas Sep 22 '12 at 02:03
you need to add `window.onLoad` listener to wait for the page to load. – Teena Thomas Sep 22 '12 at 02:07
But I have multiple functions defined in the same way and they work without having to refresh the page. :( – TheRealChx101 Sep 22 '12 at 02:16

Why do I have to refresh my page for a javascript function to work?

3 Answers3

Linked