从函数生成的 jQuery 对话框中单击元素

Question

我在使用 jQuery/Javascript 时遇到了一个相当奇怪的问题。 （这发生在 IE、FF 和 Chrome 中）

我有一个（asp.net）网页如下：

带有大量按钮的标题（在 PreRender 生成）

带有按钮的隐藏 div（生成 OnLoad）和用作对话框的 div

---

带有 iFrame 的页面

假设我在隐藏 div 中有一个带有 '1234_stuff' 作为其 CLIENTID 的按钮。 我在标题中有一个按钮，它有一个OnClientClick = "$('#1234_stuff').click();return false;";

当我单击标题中的按钮时，它可以完美运行。很好。

我在标题中有另一个按钮（我们称之为 PopupStarter），它有一个 OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";

javascript Popup 函数如下：

function Popup(title, description, buttonid) {
    $('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
    var buttonsToShow;
    if (buttonid!= null) {
        buttonsToShow = {
            'ClickMe': function () {
                $('#' + buttonid).click();
                $(this).dialog('close');
            },
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    } else {
        buttonsToShow = {
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    }
    $('#dialog-popup').dialog(
    {
        resizeable: false,
        width: 'auto',
        modal: true,
        draggable: false,
        buttons: buttonsToShow
    });
}

当我单击“PopupStarter”按钮时，jQuery 对话框按预期显示，没有问题。但是...当我单击 ClickMe 按钮时，什么也没有发生（除了关闭对话框）。

我会认为我做错了什么：所以我用计时器尝试了它：

function Popup(title, description, buttonid) {
    $('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
    var buttonsToShow;
    if (buttonid!= null) {
        buttonsToShow = {
            'ClickMe': function () {
                setTimeout(""$('#"" + buttonid + ""').click();"", 100);
                $(this).dialog('close');
            },
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    } else {
        buttonsToShow = {
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    }
    $('#dialog-popup').dialog(
    {
        resizeable: false,
        width: 'auto',
        modal: true,
        draggable: false,
        buttons: buttonsToShow
    });
}

这行得通！现在这很奇怪。所以我调用了父jQuery

parent.$('#' + buttonid).click();

这也行不通。

最重要的是，当我在浏览器的控制台中手动输入每一行时，它们都可以正常工作！

Answer 1

试试这个：

$(document).on('click', '#' + buttonid, function(){
    Your functions here;
});

页面加载时不存在的任何项目都需要将事件侦听器应用于页面加载时 DOM 中存在的文档、正文或任何父选择器。 Javascript 不会将侦听器附加到加载 DOM 时不存在的对象。希望这会有所帮助！