Question

我动态地向页面添加内容（向表中添加行）。

我希望点击表格行打开一个包含外国网址内容的模态对话框。

这就是我所拥有的。对话框将打开，但没有内容...

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,
    });
};

Answer 1

如果触发操作的元素已动态添加到DOM，则需要使用jQuery的“live”事件：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,
    });

});

Answer 2

如果它是新添加的元素，那么您需要将事件委托给父元素，以便将click事件附加到新添加的行，

$('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,
    });
});

Answer 3

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');
});

很少注意到：

您将要使用.on，因为从{jQuery 1.7开始不推荐使用.live。
您需要将外部网站加载到iframe，或者将其加载到服务器端，然后加载到模式对话框div中。
Google主页有一些脚本，不允许您将www.google.com加载到iframe。我知道人们谈论它很多，但我不确定是否有解决方法。结果，我在我的例子中加载www.microsoft.com。
我在table添加了一个ID，只是为了在使用.on函数时更加明确。

小提琴：http://jsfiddle.net/gromer/YEs9R/1/

Answer 4

如果我正确理解你的问题，你的问题不在于你的点击事件是否失败（正如上面的答案已经解决），而只是事实上没有任何东西加载到显示的对话框中？

我刚刚尝试了您的代码示例，我认为这是一个安全问题，jQuery不想加载www.google.com，因为它来自不同的域。当我使用指向来自同一域的某些内容的URL时，它工作正常。你试过了吗？

从动态添加的元素打开jQuery Dialog

4 个答案: