14

私のこの質問とほぼ同じタイトルの質問がたくさんありますが、答えが見つかりませんでした。

私の簡単な質問は次のとおりです。ボタンをクリックすると、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 "

4

6 に答える 6

13

ページが読み込まれると、jqueryは現在のDOM状態を読み取るため、次のようになります。

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

ポストからページへのロードで生成した要素が失われます。

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

$(document).on("click", '#closeButton', function(){
$(".aui-dialog").remove();
});
于 2014-07-01T16:01:15.037 に答える
12

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

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

あなたの編集へ：

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

$('#closeButton').on('click',function() {
    $(this).parent().remove();
    return false;
});
于 2012-04-23T12:31:47.067 に答える
4

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

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

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

$("tblUsers tr td input")

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

于 2014-01-23T14:28:21.480 に答える
3

いくつかのことができますが、最初に、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
于 2012-04-23T12:40:33.017 に答える
0

更新しました：

次を使用できます。

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

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

于 2012-04-23T12:40:26.620 に答える
0

私は答えを見つけました。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;
});
于 2012-04-24T08:45:24.073 に答える