0

ページにコンテンツを動的に追加します (テーブルに行を追加します)。

表の行をクリックすると、外国の URL からのコンテンツを含むモーダル ダイアログが開くようにします。

それが私が持っているものです。ダイアログが開きますが、コンテンツがありません...

newRow.onclick = function() {
    $(".detail_popup").dialog({
        modal: true,
        open: function (event, ui)
        {
            $(this).load("http://www.google.com");
        },
        //autoOpen: true,
        width: 500,
        height: 600,
        title: "Detailed Info",
        resizable: false,
    });
};
4

4 に答える 4

0

アクションをトリガーする要素が動的にDOMに追加されている場合は、jQueryの「ライブ」イベントを使用する必要があります：http：//api.jquery.com/live/

例えば：

$("newRowSelector").live("click", function(){

    $(".detail_popup").dialog({
        modal: true,
        open: function (event, ui)
        {
            $(this).load("http://www.google.com");
        },
        //autoOpen: true,
        width: 500,
        height: 600,
        title: "Detailed Info",
        resizable: false,
    });

});
于 2012-10-01T20:03:52.413 に答える
0

HTML:

<input type="button" id="add-row" value="Add row" /><br />

<table id="my-table">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
</table>

<div id="detail-popup">
    <iframe>temp</iframe>
</div>​

jQuery:

$('#detail-popup').dialog({
    modal: true,
    open: function (event, ui)
    {
        $(this).find('iframe').attr('src', 'http://www.microsoft.com');
    },
    autoOpen: false,
    width: 500,
    height: 600,
    title: "Detailed Info",
    resizable: false
});

$('#add-row').click(function() {
   $('#my-table').append('<tr><td>New Row</td></tr>');
});

$('#my-table').on('click', 'tr', function() {
    $('#detail-popup').dialog('open');
});​

いくつかのメモ:

  1. jQuery 1.7 の時点で非推奨になっている.onasを使用することをお勧めします。.live
  2. 外部サイトを にロードするiframeか、サーバー側にロードしてから、モーダル ダイアログ div にロードする必要があります。
  3. Google ホームページには、www.google.com を .xml ファイルに読み込めないようにするスクリプトがいくつかありますiframe。人々が SO でそれについてよく話していることは知っていますが、回避策があるかどうかはわかりません。その結果、この例では www.microsoft.com を読み込んでいます。
  4. 関数tableを使用するときに物事をより明確にするために、 にid を追加しました。.on

フィドル: http://jsfiddle.net/gromer/YEs9R/1/

于 2012-10-01T20:21:27.187 に答える
0

私があなたの質問を正しく理解していれば、あなたの問題はクリックイベントが失敗していることではなく(上記の回答が対処しているように)、表示されるダイアログに何もロードされないという事実だけですか?

私はちょうどあなたのコード例を試してみましたが、それは別のドメインからのものであるため、www.google.com をロードしたくないという jQuery のセキュリティ上の問題だと思います。同じドメインのコンテンツを指す URL を使用すると、問題なく動作します。もう試しましたか？

于 2012-10-01T21:50:43.727 に答える
0

新しく追加された要素の場合は、クリック イベントが新しく追加された行に関連付けられるように、イベントを親要素に委任する必要があります。

$('table').on('tr' , 'click', function() {
    $(".detail_popup").dialog({
        modal: true,
        open: function (event, ui)
        {
            $(this).load("http://www.google.com");
        },
        //autoOpen: true,
        width: 500,
        height: 600,
        title: "Detailed Info",
        resizable: false,
    });
});
于 2012-10-01T20:06:52.497 に答える