.Js file could not be called from linked html file- JQuery mobile

Question

I'm using Jquery mobile framework. I have 2 html files which has two buttons each. The clicking on one button will navigate to other html file. Javascript loaded in each html file will handle a click event in the HTML files. Problem here is , .JS loaded from second html file which is navigated from first html file could not be called. It shows error.

Error: p.attr("href") is undefined
Source File: file:///Users/Aspire/Development/JQuery%20Mobile/sample/jquery.mobile-1.0a2.min.js
Line: 96

What's going wrong?

Edited: test.html

html-tags. Under Headertag

    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.4.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
       <script type="text/javascript">   
        $(function(){
            $('#test').click(function(){
                alert('This is a general button!');
            });
        });
       </script>
  <Bodytag>
    <div data-role="content">
    <div data-role="page">
        <a id="test" data-role="button" data-inline="true" data-theme="b">Click here</a>
        <a href="~Development/JQuery Mobile/sample/test2.html" data-role="button" data-inline="true" >Navigate to two</a>
    </div>
    </div>
</Bodytag>

In the second html. test2.html

html-tags. Under Headertag

    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.4.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
       <script type="text/javascript">
        $(function(){
            $('#test2').click(function(){
                alert('This is a general button!');
            });
        });
       </script>
  <Bodytag>
    <div data-role="content">
    <div data-role="page">
        <a id="test2" data-role="button" data-inline="true" data-theme="b">Click here</a>
        <a href="~Development/JQuery Mobile/sample/test.html" data-role="button" data-inline="true" >Navigate to two</a>
    </div>
    </div>
</Bodytag>

It works fine when test2.html is opened separately in browser. Even after returning to test.html, it gives same error. Javascript is not called. i.e. only one time, Javascript works fine when .html is launched for first time. After navigation to other page, Javascript is not called.

Answer 1

I ran into the same problem, the javascript in second html just doesn't run. I worked-around the problem by adding rel="external" to force unload. i.e.

<a href="test2.html?" id="test2" data-role="button" data-inline="true" data-theme="b" rel="external">Click here</a>

Hope this works for you too.

Answer 2

Clement's answer helped, because there was no ajax call replacing your link.

A normal link (without rel=exteral) is being fetched with ajax call and only the body is taken and added to DOM of the current page.

That's why your js willnot be called.

All js must be linked to all pages in external files.