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

});
于 2012-10-01T20:03:52.413 回答
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 回答
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 is deprecated。.live
  2. 您需要将外部站点加载到iframe.，或将其加载到服务器端，然后加载到您的模态对话框 div 中。
  3. Google 主页有一些脚本不允许您将 www.google.com 加载到iframe. 我知道人们经常谈论它，但我不确定是否有解决方法。因此，我在示例中加载了 www.microsoft.com。
  4. 我在 id 中添加了一个 id table，只是为了在使用该.on函数时使事情更加明确。

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

于 2012-10-01T20:21:27.187 回答
0

如果我正确理解了您的问题，那么您的问题不在于您的点击事件失败（正如上面的答案所解决的那样），而只是没有任何内容加载到显示的对话框中？

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

于 2012-10-01T21:50:43.727 回答