通过ajax请求页面内容。但是该页面中的javascript代码未执行
[英]request a page content by the way of ajax.but the javascript code in that page is not executed
问题描述
When I click the 'AjaxButton' to request the page 'ajax.jsp' by the way of ajax.the value of 'html' is the code of 'ajax.jsp', but when I append it to div '#ajaxHtml',the is lost, alert('window msg'); 
当我单击'AjaxButton'通过ajax请求页面'ajax.jsp'时，'html'的值是'ajax.jsp'的代码，但是当我将其附加到div'#ajaxHtml'时，丢失了，alert（'window msg'）; is not executed,click the 'methodOne' button is not execute too; 未执行时，单击“ methodOne”按钮也未执行；
$(function(){
alert('jquery init method!');
});
the code above is not executed too! 上面的代码也没有执行！
why ? 为什么呢？ How can I solve this problem,or is another way to achieve the same? 我该如何解决这个问题？
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>
3 个解决方案
解决方案1
0 2010-12-09 10:31:24
You can't insert a HTML page into a div . 您不能将HTML页面插入div 。 Use an iframe instead. 请改用iframe 。
解决方案2
0 2010-12-09 10:43:58
I had the same problem. 我有同样的问题。 The only way to solve it is like Aaron answered: use an iframe to receive the html page. 解决此问题的唯一方法就像Aaron回答：使用iframe接收html页面。 But remembers this: the code from an iframe CAN'T act beyond the iframe. 但是请记住这一点： iframe中的代码不能在iframe之外起作用。 In other words, the script inside the iframe can't do anything to the page where the iframe is inserted, but script on the page can access everything in the iframe. 换句话说，iframe中的脚本无法对插入iframe的页面执行任何操作，但是页面上的脚本可以访问iframe中的所有内容。
解决方案3
0 2010-12-13 21:00:07
jquery mobile loads everything that You simply link to with AJAX requests.Just link to the page and it will do it properly. jQuery mobile会加载您只需通过AJAX请求链接到的所有内容。只需链接到页面，它将正确执行。 Just don't use rel=external (unnecessarily). 只是不要使用rel=external （不必要）。 If you need to use POST - it works with forms too. 如果您需要使用POST-它也适用于表单。 If you want to do it yorself despite that - follow the metodology. 尽管如此，如果您想自己做，请遵循气象学。
You shouldn't load the whole html content into a div - it's really messy. 您不应该将整个html内容加载到div中-这真的很乱。 If you use ajax, you're interested only in the body of the loaded page. 如果使用ajax，则只对已加载页面的正文感兴趣。 Even if you put in the whole html document - the jquery code you created there will not run, because the DOMready event does not fire - the site did not load as a document, it's you who put the whole thing inside an existing DOM. 即使您放入整个html文档-您创建的jquery代码也不会运行，因为不会触发DOMready事件-该网站并未作为文档加载，但是您还是将整个内容放入了现有的DOM中。 The code will not work. 该代码将无法正常工作。
To make it work - define the function in a <script> block inside the body and call the function after loading the bit into the page. 要使其起作用，请在主体内的<script>块中定义该函数，然后在将该位加载到页面中之后调用该函数。
To make jquery work with new content that you inject to DOM - see the related question at http://jquerymobiledictionary.dyndns.org/faq.html 要使jquery处理您注入DOM的新内容-请参阅http://jquerymobiledictionary.dyndns.org/faq.html上的相关问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.