DOMにXMLを挿入すると、クラス/ IDセレクタが動作しなくなる

私はajaxでXMLファイルを読み込み、このXML DOMドキュメントの一部をブラウザのHTML DOMに挿入しようとしています。DOMにXMLを挿入すると、クラス/ 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：あなただけのAJAX経由でHTMLをつかむと、あなたのページに挿入しようとしているよう

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

出典

2012-02-08 Christian

これを実行した後、ページの本文はどのように見えますか？ – Daniel

'dataType'を' 'html''に変更してみてください...なぜ、あなたは' .clone（） 'を使っていますか？ –

@ダニエル、ソースが期待どおりに見える、XMLのコードが正しく挿入されている。 – Christian

-1

に思えます。これを行うには、あなたの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); 

});

出典

2012-02-08 13:22:23 Mike

これは単純なテストケースですが、実際のXMLには、HTMLのように挿入する必要がある部分しかありません。データ型を 'html'に設定するだけでは十分ではありません。私は適切なxmlns宣言でhtmlルート要素を追加する必要があります。 – Christian

-1

期待通りです。 $(xnl).find("h1").text()にアラートして確認できます。しかし、xmlの二重引用符を一重引用符に変更してみてください。あなたのffでHTML5サポートを無効にすることもできます（これも問題かもしれません）。

出典

2012-02-08 15:16:31

DOMにXMLを挿入すると、クラス/ IDセレクタが動作しなくなる

答えて

関連する問題