以ajax的方式請求頁面內容，但該頁面中的javascript代碼未執行

當我點擊'AjaxButton'以ajax.the的值的方式請求頁面'ajax.jsp' '是'ajax.jsp'的代碼，，但是當我將它追加到div'＃ajaxHtml'時，丟失了，alert（'msg'）;沒有執行，單擊'methodOne'按鈕也不執行;以ajax的方式請求頁面內容，但該頁面中的javascript代碼未執行

$(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[[email protected]]</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>

來源

2010-12-09 ZhaoSheng

您不能插入HTML頁面到div。改爲使用iframe。

來源

2010-12-09 10:31:24

的相關問題，這是jQuery Mobile的。這一切都是用ajax完成的。在這裏使用iframe不是一個好主意。答案在這方面是不正確的。 – naugtur 2010-12-13 20:50:09

我有同樣的問題。解決這個問題的唯一方法就像Aaron回答：使用iframe來接收html頁面。但是請記住：來自iframe的代碼不能超出iframe。 換句話說，iframe中的腳本無法對iframe插入的頁面執行任何操作，但頁面上的腳本可以訪問iframe中的所有內容。

來源

2010-12-09 10:43:58

jquery mobile加載您只需鏈接到AJAX請求的所有內容。只要鏈接到頁面，它就會正確執行。只是不要使用rel=external（不必要的）。如果您需要使用POST，它也可以與表單一起使用。如果你想盡管做到這一點 - 遵循metodology。

你不應該加載整個HTML內容到一個div - 這真的很混亂。如果你使用ajax，你只對被加載頁面的主體感興趣。即使您放入整個html文檔 - 您創建的jquery代碼也不會運行，因爲DOMready事件不會觸發 - 網站不會作爲文檔加載，而是將整個事件放入現有DOM中。該代碼不起作用。

爲了使其工作 - 在主體內的<script>塊中定義函數，並在將該位加載到頁面中之後調用該函數。

要與你注入到DOM新的內容jQuery的工作 - 見http://jquerymobiledictionary.dyndns.org/faq.html

來源

2010-12-13 21:00:07 naugtur