0

当我点击'AjaxButton'通过ajax的方式请求页面'ajax.jsp'时'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

我有同样的问题。解决它的唯一方法就像 Aaron 回答的那样：使用 iframe 接收 html 页面。但请记住这一点：iframe 中的代码不能超出 iframe。 也就是说，iframe 里面的脚本不能对插入 iframe 的页面做任何事情，但是页面上的脚本可以访问 iframe 中的所有内容。

于 2010-12-09T10:43:58.147 回答
0

jquery mobile 加载您只需通过 AJAX 请求链接到的所有内容。只需链接到该页面，它就会正确执行。只是不要使用rel=external（不必要地）。如果您需要使用 POST - 它也适用于表单。尽管如此，如果你想自己做 - 遵循方法论。

你不应该将整个 html 内容加载到一个 div 中——它真的很乱。如果您使用 ajax，您只对加载页面的正文感兴趣。即使您放入整个 html 文档 - 您在那里创建的 jquery 代码也不会运行，因为 DOMready 事件不会触发 - 该站点没有作为文档加载，是您将整个内容放入现有的 DOM 中。该代码将不起作用。

为了使其工作 - 在<script>主体内的块中定义函数并在将位加载到页面后调用该函数。

要使 jquery 与您注入到 DOM 的新内容一起工作 - 请参阅http://jquerymobiledictionary.dyndns.org/faq.html上的相关问题

于 2010-12-13T21:00:07.607 回答