jQuery 按钮单击自定义对话框标题答案

【问题标题】：jQuery Button Click in custom Dialog HeaderjQuery 按钮单击自定义对话框标题
【发布时间】：2012-08-08 00:29:43
【问题描述】：

我正在创建一个全屏 jQuery 对话框。

我正在创建一个自定义 <div> 作为对话框的标题。

<div> 的内部是一个<table>。 <table> 包含 1 个<tr>，其中包含 5 个<td>s。每个<div> 的内部都是要显示在对话框标题中的实际内容。

我正在尝试显示一些 jQuery 按钮对象以允许用户编辑标题中的任何信息。我已将单击事件附加到按钮，并将另一个单击事件附加到标题。点击按钮，调用标题的点击事件，但按钮的点击事件永远不会被调用。

这是对话框标题点击代码：

$(dialog)
    .parent()
    .find('.ui-dialog-titlebar').click(
        function () {
            $(dialog).dialog('close').remove();
        }
    );

这是按钮创建代码：

var editBtn = $('<button>');
editBtn
    .css('height', '2.2em')
    .css('float', 'right')
    .button(
        {
            text: false,
            icons:
                {
                    primary: 'ui-icon-pencil'
                }
        }
    )
    .on(
        'click',
        function () {
            alert('Edit clicked');
            EditClicked(this);
            return false;
        }
    );

知道如何解决这个问题吗？

【问题讨论】：

标签： jquery events button dialog click

【解决方案1】：

在使用 jQuery 时，您可能会选择 <button> 而不是 button。我从来没有尝试过选择带有标签的 html 对象。您的样式是否已添加到按钮中？另外，对 css 使用哈希：

.css({'height':'2.2em','float':'right'})

如果你调用 css 两次，高度可能会被覆盖。

另一个技巧是使用.closest('.ui-dialog-titlebar') 而不是对.parent().find() 进行两次方法调用。

干杯！

【讨论】：

实际上，我不是选择<button>，而是创建一个。这就是我将其包装在<> 中的原因。此外，我在链接.css() 调用方面没有遇到任何问题，这样做有助于我更好地可视化我的代码。我正在调查.closest() 提示。谢谢！

【解决方案2】：

.on 可能不是你想要的。其目的是将通用事件处理程序附加到与给定元素内的给定选择器匹配的任何元素上，无论它们是何时创建的。

您需要的是.bind()，它将事件处理程序附加到特定对象。

所以，这段代码应该可以完成这项工作：

var editBtn = $('<button>');
editBtn
    .css({
        'height': '2.2em',
        'float': 'right'
    })
    .button(
        {
            text: false,
            icons:
                {
                    primary: 'ui-icon-pencil'
                }
        }
    )
    .bind(
        'click',
        function () {
            alert('Edit clicked');
            EditClicked(this);
            return false;
        }
    );

（另外：您可以通过传递一个对象来避免链接.css()）。

【讨论】：