Question

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

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

<div>的内部是<table>。 <table>包含1 <tr>，其中包含5 <td>个。每个<div>的内部是在Dialog标题中显示的实际内容。

我正在尝试显示一些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;
        }
    );

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

Answer 1

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

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

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

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

干杯！

Answer 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()。

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

2 个答案: