Question

我正在开发一个应用程序，我正在打开一个模态对话框。该对话框允许用户将标准复选框添加到正在显示的模式对话框div中。他们将复选框的文本输入到页面上的文本框中，然后单击按钮以附加复选框。复选框显示就好了。在每个复选框旁边，我还添加了一个jquery ui-icon图标关闭图像类，这样当单击新条目旁边的X时，该条目将从页面中删除。

问题在于简单地在页面中指定脚本不起作用。 div似乎不是页面的一部分，并且为所有图像定义onclick监听器并不能达到预期的效果。所以我的问题是，如何在模态对话框中定义图像onclick监听器。例如，在定义模式对话框时，我可以指定一个on open函数，它在第一次打开对话框时执行某些操作。我想以类似的方式定义一个在模态对话框中单击图像时主动监听的功能。

示例：

        $("<div class='rationale' style='position: relative;'><div class='rationaleContainer' style='display:block; height:155px; overflow-y: scroll;'></div><div class='rationaleText' style='position: absolute; bottom: 0; float: right;'><input type='text' placeholder='Add rationale' id='rationaleBox' style='width: 540px;' maxlength='180'></div></div>").dialog({
        height: 300,
        width: 600,
        modal: true,
        closeOnEscape: false,
        resizable: false,
        title: "Comments for " + item,
        open: function(event, ui){
            $(".ui-dialog-titlebar-close").hide();
            $(".ui-dialog-title").after("<i style='font-size: 12px; float: right;'>("+value+")</i>");
            $(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset").css("float", "none");
        },

与定义的open函数类似，我想为图像点击创建一个监听器

Answer 1

要定义一个侦听单击元素的全局处理程序，请使用jQuery 1.7或更高版本上的on函数。例如：

$(document).ready(function() {
    $('.ui-dialog .icon-close').on('click', function() {
        // an element of *.icon-close* within *.ui-dialog*
        // had been clicked
        $('ui-dialog').hide();
    });
});

如果您使用1.7之前的jQuery版本，请使用delegate代替on，如下所示：

$(document).ready(function() {
    $('.ui-dialog .icon-close').delegate('', 'click', function() {
        // an element of *.icon-close* within *.ui-dialog*
        // had been clicked
        $('ui-dialog').hide();
    });
});

在JQuery模式对话框中指定图像onclick侦听器

1 个答案: