0

「AjaxButton」をクリックしてページ「ajax.jsp」を ajax.way でリクエストすると「html」の値が「ajax.jsp」のコードなのですが、div「#ajaxHtml」に追記すると、これは失われました、alert('window msg'); 実行されません。「methodOne」ボタンをクリックしても実行されません。

 $(function(){
        alert('jquery init method!');
    });

上記のコードも実行されません!

なぜ ？この問題を解決するにはどうすればよいですか、または同じことを達成する別の方法はありますか?

main.jsp
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
 <head>
        <title>Ajax</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(){
                $('#ajax').click(function(){
                    ajaxTo();
                });
            });
            function ajaxTo(){
                $.ajax({
                    url: '${ctxPath}/cf/customFormTemplateAction!context.action',//ajax.jsp
                    type: 'POST',
                    data: {fileName:'ajax'},
                    success: function( html ) {
                        $('#ajaxHtml').append(html);
                    }
                });
            }
        </script>
    </head>
    <body style="background-Color:red;">
        <div id="zhaosheng" style="border:10px solid lightblue;">
            <div id="page" data-role="page" style="border:2px solid blue;" data-theme='d' data-zhaosheng='zhaosheng'>
                <div data-role="header" data-position="inline" data-position="fixed">
                    <h1>Chinese</h1>
                </div>
                <div data-role="content">
                    <a id="ajax" data-role="button"  rel="external">AjaxButton</a>
                    <div id="ajaxHtml"></div>
                </div>
                <div data-role="footer" data-position="fixed">
                <h1>DCL[zhaosheng.wolf@163.com]</h1>
            </div>
            </div>
        </div>
    </body>
</html>


ajax.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 defer="defer">
            function methodOne(){
                alert('This is a test message!');
            }
            $(function(){
                alert('jquery init method!');
            });
            alert('window msg');
        </script>
    </head>
    <body >
        CONTENT<br/>
  <a href='javascript:methodOne();'>methodOne</a>
    </body>
</html>
4

3 に答える 3

0

に HTML ページを挿入することはできませんdiv。iframe代わりにを使用してください。

于 2010-12-09T10:31:24.023 に答える
0

私も同じ問題を抱えていました。それを解決する唯一の方法は、アーロンが答えたようなものです.iframeを使用してhtmlページを受信して​​ください。しかし、これを覚えておいてください: iframe からのコードは、iframeを超えて動作することはできません。 つまり、iframe 内のスクリプトは iframe が挿入されたページに対して何もできませんが、ページ上のスクリプトは iframe 内のすべてにアクセスできます。

于 2010-12-09T10:43:58.147 に答える
0

jquery モバイルは、AJAX リクエストでリンクするだけのすべてをロードします。ページにリンクするだけで、適切に処理されます。rel=external（不必要に）使用しないでください。POST を使用する必要がある場合は、フォームでも機能します。それでも自分でやりたい場合は、方法論に従ってください。

HTML コンテンツ全体を div にロードしないでください。これは非常に面倒です。ajax を使用する場合、ロードされたページの本文だけに関心があります。html ドキュメント全体を配置しても、そこに作成した jquery コードは実行されません。これは、DOMready イベントが発生しないためです。サイトはドキュメントとして読み込まれませんでした。すべてを既存の DOM 内に配置したのはあなたです。コードは機能しません。

機能させるには、ボディ内のブロックで関数を定義し<script>、ビットをページにロードした後に関数を呼び出します。

DOM に挿入した新しいコンテンツで jquery を機能させるには、http://jquerymobiledictionary.dyndns.org/faq.htmlで関連する質問を参照してください。

于 2010-12-13T21:00:07.607 に答える