web-dev-qa-db-ja.com

jQuery select動的に作成されたhtml要素

私のこの質問には、ほとんど同じようなタイトルの質問がたくさんありますが、あなたは私が答えを見つけられなかったことを知っています。

私の簡単な質問は次のとおりです。ボタンがあります。クリックすると、JavaScriptがモーダルウィンドウを作成します

<div class="aui-dialog">
     html here... 
     <button id="closeButton">Close</button>
</div>

すぐ後 <body> 鬼ごっこ。

jQueryを使用して閉じるボタンのクリックイベントを問題なくバインドできますlive：

$("#closeButton").live("click", function() { 
    alert("asdf"); // it calls
    $("body").find(".aui-dialog").remove();
});

私の問題はで、動的に作成されたモーダルウィンドウdivをクラス名で選択できません。そのため、jQuery .remove（）メソッドを呼び出して、クローズアクションを実行できます。今では、動的要素を別の方法で処理する必要があります。

どのように？

編集：
これについて言及することが重要だと思います：
私は自分でモーダルウィンドウを作成しません。 liferay ポータルを使用します。組み込みのJavaScriptフレームワーク[〜＃〜] aui [〜＃〜]（ [〜＃〜] yui [〜＃ 〜] ）モーダルウィンドウを作成します。ビュー内で閉じるボタンを作成できます。

編集2：
モーダルウィンドウのdivクラス属性値は次のとおりです： "aui-component aui-panel aui-dialog aui-widget-positioned"

javascriptjqueryjquery-selectorsdynamically-generated
13
Almas Adilbek

モーダルウィンドウを作成するときに参照を作成します。

var modalWindow = $('<div class="aui-dialog">html here... <button id="closeButton">Close</button></div>');
// later...
modalWindow.remove();

あなたの編集へ：

ボタンがモーダルウィンドウ内にある場合、jQueryのparentを介してウィンドウを取得します。

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});
11
binarious

Jqueryはページの読み込み時に現在のDOM状態を読み取るため、

jQuery( document ).ready(function( $ ) {

ポストからページへのロードで生成する要素を見逃します。

簡単な解決策の1つは、ドキュメントのクリックをリッスンし、コードの実行に使用するクラスまたは要素タイプでフィルタリングすることです。これにより、ページの読み込み後に、jqueryがドキュメントの下に生成された新しい要素を見つけます。

$(document).on("click", '#closeButton', function(){
$(".aui-dialog").remove();
});
9
JUlinder

いくつかのことを行うことができますが、最初に、jQuery 1.7を使用している場合は、.on()を使用することをお勧めします。廃止予定の.live()を置き換えました。

モーダルの作成を制御できないが、ボタンがモーダルの直接の子であることがわかっている場合は、parent()を使用します。

_$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});
_

ボタンが親のどこかにあるが、親からの深さが固定されている場合は、parents()を使用して要素のすべての祖先を取得し、特定の深さにフィルターします。終値が2レベルの深さである場合、:eq()のインデックスは1になります。

_$('#closeButton').on('click',function() {
    //where N is zero-indexed integer, meaning first item of the set starts with 0
    $(this).parents(':eq(N)').remove(); 
    return false;
});
_

別の方法は、モーダルが作成されたときにハンドラーを追加することです

_var modal = $('modalHTML');

$('#closeButton',modal).on('click',function(){
    //modal still refers to the whole modal html in this scope
    modal.remove();
});

//show modal
_
3
Joseph

私のように、JQueryによってランタイムで生成された要素を選択したが失敗した場合、多くのユーザーがこのページにアクセスします。
ソリューションは、ランダムに生成された要素のルート（親）にアプローチし、次にjQuery TAG selectionによって内部を取得します。たとえば、実行時にテーブルに多数のユーザーのTDを生成します。ユーザーリストを持つ要素は、tblUsersというIDを持つテーブルであり、実行時に生成されたTRまたはTDを次のように反復できます。

$("#tblUsers tr").each(function(i){
    alert('td' + i);
});

さらに、tdsに入力がある場合、次のように選択を深くすることができます

$("tblUsers tr td input")

別のケースとしては、ランダムに生成されたダイアログまたはポップアップが考えられ、そのルート（親）にアプローチし、上記のようにTAGで次に同じ選択を行う必要があります。

3
ahmadalibaloch

私は答えを見つけました、それが[動的に内部で[〜＃〜] iframe [〜＃〜]を使用して生成されたHTMLに直面した開発者にとって役立つことを願っています。

そのIFRAME内にボタン（#closeButton）があり、iframe親ウィンドウのdom要素を選択したい場合は、セレクターに2番目の引数window.parent.documentを追加します。

// This functions is inside generated IFRAME
$("#closeButton").on("click", function() {        
       // body - is your main page body tag
       /* Will alert all html with your dynamically 
          generated html with iframe and etc. */
       alert($('body', window.parent.document).html()); 
       return false;
});
0
Almas Adilbek

更新：

以下を使用できます。

_$(".aui-dialog").live('click', function() {
    $(this).remove();
    return false;
});)
_

現在および将来の現在のセレクターに一致するすべての要素のイベントハンドラーをアタッチします。このメソッドは新しいバージョンの jQuery では廃止されているので注意してください。.on()ではなく.live()の使用を検討してください。

0
Stian