2012-02-08 62 views
1

我想加載一個XML文件與Ajax和插入XML DOM文檔的部分到瀏覽器的HTML DOM。插入XML到DOM導致不工作的類/ ID選擇器

這工作到目前爲止,但是當我嘗試使用jquery獲取具有類或id選擇器的插入元素時,它將返回空列表。

到目前爲止,我只在Firefox 10中試過。有沒有人有線索爲什麼這可能是?這樣做不安全嗎?

的test.html:

<html><head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <title>dom test</title> 
    <script type="text/javascript"> 
    $(function() { 
     var xml = null; 
     $.ajax({ 
     type : "GET", 
     async : false, 
     url : 'test.xml', 
     dataType : "xml", 
     success : function(data) { 
      xml = data; 
     } 
     }); 

     $('body').html($(xml).children().clone()); 

     console.log($('h1')); // prints the h1 element 
     console.log($('.title')); // prints empty list 

     console.log($('p')); // prints the p element 
     console.log($('#content')); // prints empty list 
    });  
    </script> 
</head><body></body></html> 

的test.xml:

<div id="root"> 
    <h1 class="title">Blabla</h1> 
    <p id="content"> 
    Lorem ipsum 
    </p> 
</div> 
+0

運行後,頁面的主體看起來像什麼? – Daniel 2012-02-08 13:15:58

+0

嘗試將'dataType'改爲''html'' ...爲什麼使用'.clone()'? – 2012-02-08 13:21:04

+0

@daniel,源代碼看起來像預期的,從xml中正確插入代碼。 – Christian 2012-02-08 13:44:45

回答

-1

好像你只是想通過AJAX搶HTML,然後將其插入到您的網頁。要做到這一點,你應該在你的ajax請求中使用dataType: "html"

$(function() { 
    var html = null; 
    $.ajax({ 
     type : "GET", 
     async : false, 
     url : 'test.xml', 
     dataType : "html", 
     success : function(data) { 
      html = data; 
     } 
    }); 

    $('body').html(html); 

}); 
+0

這只是一個簡單的測試用例,真正的XML只有一些需要插入的部分,看起來像HTML。將數據類型設置爲'html'也是不夠的。我必須添加一個適當的xmlns聲明的html根元素。 – Christian 2012-02-08 13:34:43

-1

它正在按預期工作。可以通過提醒$(xnl).find("h1").text()進行驗證。然而,你可以請嘗試在你的XML中將雙引號改爲單引號。並在你的ff禁用HTML5支持(這可能也是問題)?