jQueryを使用してhtmlのすべてのコンテンツをjspにプッシュしようとしています。
私はこのような空のdivを作りました:
<div class="modal fade" id="formModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="formModal_title"></h4>
</div>
<div class="modal-body" id="viewDiv">
<div class="widget-body padding-10" id="modal_container" style="height: 430px; overflow: auto;">
</div>
</div>
</div>
</div>
</div>
そして、他のhtmlからjQuery.get()を使用してHTMLを作成しました。お気に入り...
$.get('/resources/news.html', function(data){
$('#modal_container').append($(data).fadeIn());
});
//main_exposure is not important here.
$('#main_exposure').find('tr').each(function(){
var nid = $(this).attr('nid');
var news_cd = $(this).attr('news_cd');
for(var idx in setting_news_cds){
if(setting_news_cds[idx] == news_cd){
console.log(generateHTML($('#' + news_cd).html('')));
}
}
});
次に、chrome InspectorからIDとデータを確認できたとしても、console.log()はundefinedを出力します。
何度か試したところ、「ページソースを表示」(ブラウザで右クリックして「ページソースを表示」)に$ .get()の結果が見つからないことがわかりました。
動的な方法で作成されたモーダルウィッチのIDにアクセスする方法はありますか(これは$ .get()を意味します)?
新しいHTMLがページソースに表示されない場合に発生する問題は、get()関数とは関係ありませんが、DOMでは一般的にJSを介して変更されます。ページソースビューには、サーバーからの最初の応答に付属しているもののみが表示されます。ただし、インスペクターとFirebugですべての変更が表示されます。
DOMに追加された適切な要素を見つける際に発生する問題は、コンテンツを非同期で追加していて、ロードされる前に要素にアクセスしようとしているという事実に起因している可能性があります。言い換えると、jQueryにget()コンテンツを指示し、getが完全に完了する前にこれらのコンテンツを検索します。HTMLを追加するために使用しているコールバック関数(get()に渡す関数)内に、新しくロードされたコンテンツに対して実行するコードを配置します。
変更後のコードは次のようになります。
$.get('/resources/news.html', function(data){
$('#modal_container').append($(data).fadeIn());
//main_exposure is not important here.
$('#main_exposure').find('tr').each(function(){
var nid = $(this).attr('nid');
var news_cd = $(this).attr('news_cd');
for(var idx in setting_news_cds){
if(setting_news_cds[idx] == news_cd){
console.log(generateHTML($('#' + news_cd).html('')));
}
}
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加