在 JQuery 模态对话框中指定图像 onclick 侦听器答案

【问题标题】：Specify an image onclick listener within the JQuery Modal Dialog box在 JQuery 模态对话框中指定图像 onclick 侦听器
【发布时间】：2012-06-15 17:39:59
【问题描述】：

我正在开发一个打开模式对话框的应用程序。该对话框允许用户向正在显示的模态对话框 div 添加诸如条件之类的复选框。他们将复选框的文本输入页面上的文本框中，然后单击按钮以附加复选框。复选框显示得很好。在每个复选框旁边，我还添加了一个 jquery ui-icon icon-close 图像类，以便在单击新条目旁边的 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 函数，我想为图片点击创建一个监听器

【问题讨论】：

标签： javascript jquery

【解决方案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();
    });
});

【讨论】：