Question

当我点击'AjaxButton'以ajax的方式请求页面'ajax.jsp'时，'html'的值是'ajax.jsp'的代码，但是当我把它附加到div'＃ajaxHtml'时，它会丢失，警告（'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>

Answer 1

您无法将HTML网页插入div。请改用iframe。

Answer 2

我遇到了同样的问题。解决问题的唯一方法就像Aaron回答：使用iframe接收html页面。但请记住：来自iframe 的代码代码超出了iframe。 换句话说，iframe中的脚本无法对插入iframe的页面执行任何操作，但页面上的脚本可以访问iframe中的所有内容。

Answer 3

jquery mobile加载您只需链接到AJAX请求的所有内容。只需链接到该页面即可正常运行。只是不要使用rel=external（不必要）。如果你需要使用POST - 它也适用于表单。如果你想做到这一点，尽管如此 - 遵循方法论。

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

要使其工作 - 在正文内的<script>块中定义函数，并在将该位加载到页面后调用该函数。

使jquery使用您注入DOM的新内容 - 请参阅http://jquerymobiledictionary.dyndns.org/faq.html上的相关问题

通过ajax的方式请求页面内容。但是不执行该页面中的javascript代码

3 个答案: