0

我正在创建一个全屏 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;
        }
    );

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

4

2 回答 2

0

.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()通过传递一个对象来避免链接）。

于 2012-08-10T19:19:35.897 回答
0

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

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

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

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

干杯!

于 2012-08-10T17:52:43.237 回答