CODEWITHSUNDEEP
javascripthtmljquery-mobile
king yau
king yau

Reputation: 510

JavaScript is not working in the html when the html is executed from a link

I have two simple html files which has a link in body and a log in JavaScript. In A.html, it is a link to jump to B.html and a console.log("a 123"); in JavaScript. However, the "a 123" message will only be showed when refresh the browser but not be executed from a link. For example, if i click the link Go to a in b.html, the message "a 123" will not be showed.

Any idea?

-----A.html-------

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>

</style>
</head>

<body>
<div data-role="page" id="a">

  <div data-role="main" class="ui-content">
    <a href='b.html'>Go to b</a>
  </div>

</div> 


<script>
console.log("a 123");

</script>

</body>
</html>

-----B.html-------

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>

</style>
</head>

<body>
<div data-role="page" id="b">

  <div data-role="main" class="ui-content">
    <a href='a.html'>Go to a</a>
  </div>


</div> 


<script>
console.log("b 123");

</script>

</body>
</html>

Upvotes: 1

Views: 72

Answers (2)

Andreas Furster
Andreas Furster

Reputation: 1638

Bit of searching and I found the answer! Apparently it's a 'feature' of Jquery Mobile. It's using an Ajax navigation system. So it stays singlepage.

From the docs:

jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.

Maybe it's a good idea to read the intro of jQuery mobile: http://demos.jquerymobile.com/1.4.5/intro/

Upvotes: 2

Christian Hill
Christian Hill

Reputation: 378

That's because the code your code only executes on the page load. If you want it to execute on an event, you need to wrap it in a function and call the function in the onclick attribute on your link.

Upvotes: 0

Related Questions