jQuery Mobile Ajax(the js is not execute)

Question

I am a Chinese!My English is bad,but I have a trouble about JQuery Mobile!I hope that foreign friend can help me.The Question is below!

first:At the first.jsp,Click the 'General Button' is OK.but the 'Submit Button' is not OK.Why?? second:Click the 'Link Button',navigate to second.jsp,click the 'Test' button.the javascript code is not execute!

I do not know Why they happen!Can you help me!Thank you.

first.jsp

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
 <head>
        <title>China</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.css" />
        <script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.js"></script>
        <script>
            $(function(){
                $('#Button').click(function(){
                    alert('This is a general button!');
                });
                $('#ButtonSubmit').click(function(){
                    alert('This is a submit button!');
                });
            });
        </script>
    </head>
    <body>
        <div id="page" data-role="page" data-theme='d'>
            <div data-role="header" data-position="inline" data-position="fixed">
                <h1>Chinese</h1>
            </div>
            <div data-role="content">
                <a id="Button" data-role='button' data-iconpos="right" data-icon="gear">General Button</a>
                <a id="ButtonSubmit" data-role='button' data-iconpos="right" type="submit" data-icon="gear">Submit Button</a>
                <a id="link" href="/mobile/mobile/second.jsp" data-role='button' data-iconpos="right" data-icon="gear">Link Button</a>
            </div>
            <div data-role="footer" data-position="fixed">
                <h1>[Email:[email protected]][1]</h1>
            </div>
        </div>
    </body>
</html>

second.jsp

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
 <head>
        <title>China</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.css" />
        <script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="/mobile/mobile/common/script/jQuery/jquery.mobile-1.0a2.js"></script>

        <script>
            $(function(){
                $('#test').click(function(){
                    alert('This is a general button!');
                });
            });
        </script>
    </head>
    <body>
        <div id="page" data-role="page" data-theme='d'>
            <div data-role="header" data-position="inline" data-position="fixed">
                <h1>[Chinese][2]</h1>
            </div>
            <div data-role="content">
                <a id="test" data-role='button' data-iconpos="right" data-icon="gear">Test</a>
            </div>

            <div data-role="footer" data-position="fixed">
                <h1>Email:[email protected]</h1>
            </div>
        </div>
    </body>
</html>


  [1]: http://[email protected]
  [2]: http://[email protected]

eriksv88 · Accepted Answer · 2010-12-07 09:27:19Z

1

Remove type="submit" in #ButtonSubmit

And if u like to style your button, so it looks like a button, take a look at her.

edited Dec 7, 2010 at 9:27

answered Dec 7, 2010 at 9:18

eriksv88

3,5463 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ZhaoSheng Over a year ago

$(function(){ $('#test').click(function(){ alert('This is a general button!'); }); });

ZhaoSheng Over a year ago

I want to know why that the 'second.jsp' page 'Test' button click event is not added?why? It looks like the javascript code is not executed;Can you tell why it happened?

ZhaoSheng Over a year ago

I have been read the source code of jquery-moible.js.It seems that method innerHTML() and jquery's method wrap() can lead to the javascript code be executed.

eriksv88 Over a year ago

Try edit the #test to: <a id="test">Click her</a>, what happend?

Rael Max · Accepted Answer · 2011-03-09 13:48:09Z

0

The jQuery Mobile uses ajax to change of page, and you need a live() or delegate() to event "pageshow" or other for run when this event call.

answered Mar 9, 2011 at 13:48

Rael Max

3932 silver badges6 bronze badges

Collectives™ on Stack Overflow

jQuery Mobile Ajax(the js is not execute)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related