ajax.loadの後にDOM要素にアクセスする

Question

AJAX呼び出しからのHTML応答をページに挿入していますが、作成後にこれらの要素にアクセスしようとすると失敗します。

これは、HTMLを取得して挿入する方法です：

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) {$('#my_container').html(outData);} 
})

<div>（id = my_container）に挿入される結果HTMLは次のようになります。

<div id="my_container">
   <ul>
      <li id="578" class="notselected">milk</li>
      <li id="579" class="notselected">ice cream</li>
      <li id="580" class="selected">chewing gum</li>
   </ul>
</div>

...そしてその後、次のようなクエリを使用して<li>要素のいずれかにアクセスしようとすると： $('#my_container li:first')または $('#my_container ul:first-child')または同様のもの、何も選択されません。

Listenプラグインを使用して、$(document).ready要素のクリックイベントを検出していますそしてそれは動作します...しかし、divに出力HTMLが入力されているかどうかを検出する方法がわかりませんでした。したがって、たとえば<=>のクラスの1つを変更します...

<=>も機能しません...

2番目のCSSスタイルを変更する必要があると想像してください<=> ..これに対する解決策は何ですか？

Answer 1

AJAX呼び出しが完了したかどうかをどのように確認していますか？非同期であるため、要素はもちろん、$.ajax(…)呼び出しの直後に実行されるコードでは使用できません。

success関数内またはそこから呼び出される他のコード内からこれらの要素を操作してみてください<！>＃8212;その時点で、コンテンツが利用可能であることがわかります。

Answer 2

実際のリクエストは成功していますか？何も選択されていない場合、最も可能性の高い理由は、そもそも#my_containerに実際に何も挿入されなかったことです。

Answer 3

まず、次のコードを試してください（元のAJAX呼び出しの代わりに）：

var html = $.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   async: false
}).responseText;
$('#my_container').html(html);

それが機能する場合、AJAXリクエストが完了する前にli:firstセレクターが呼び出されるだけです。それでもうまくいかない場合は、次のコードを試してください：

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) { $('#my_container').html(outData); }, 
   error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});

リクエストが失敗すると、エラーメッセージがポップアップ表示されます。エラーメッセージとともにエラーメッセージがポップアップした場合、リクエストは返されません。

Answer 4

現在のajax呼び出しは非同期であるため、作成前にこれらの要素にアクセスしようとしているようです。オプションを追加してみてください。 <！> quot; async = false <！> quot; あなたのajaxにそれは動作するはずです。