Question

我在jQuery UI对话框标题栏中添加了一个自定义按钮，如下所示：

$('#dialog').html(html);
$('#dialog').dialog({
    modal: true,
    open: function(event, ui) {
        $(".ui-dialog-titlebar").append("<a href=\"#variants\" id=\"variants-button\"><img src=\"admin-images/variants-button.png\" alt=\"Variants\" /></a>");
    }
});

现在我需要在此按钮上添加一个“点击”处理程序，但我正在努力解决这个问题。

$('#variants-button').click(function(){
    $('#information').hide();
    $('#variants').show();
    return false;
});

这没有任何作用。我也尝试将点击处理程序放在'委托'中，但这也不起作用。有什么想法吗？

编辑：zysoft提供了正确的解决方案，但我需要在页面上使用多个对话框。它似乎没有多个对话框的预期效果。

Answer 1

当对话框打开时，您的按钮会在运行时添加。它似乎发生在你分配点击处理程序后。试试这个：

$('#variants-button').live('click', function(){
    $('#information').hide();
    $('#variants').show();
    return false;
});

Answer 2

为什么不在添加新按钮后创建点击处理程序？

$('#dialog').html(html);
$('#dialog').dialog({
    modal: true,
    open: function(event, ui) {
        $(".ui-dialog-titlebar").append("<a href=\"#variants\" id=\"variants-button\"><img src=\"admin-images/variants-button.png\" alt=\"Variants\" /></a>");
        $('#variants-button').click(function(){
            $('#information').hide();
            $('#variants').show();
            return false;
        });
    }
});

如果在将元素添加到DOM后添加事件处理程序，则应该没问题。

<强>更新根据您的更新，如果您想对多个对话框标题按钮执行此类操作，则委托可能会更好（因为您将避免为每个对话框执行此操作）。

您可以将一个类应用于您的按钮（例如variant-class），该按钮充当您将用作on处理程序的选择器的标记类：

$('.variant-class').on('click', function() {
  $('#information').hide();
  $('#variants').show();
  return false;
});

我希望这会有所帮助。祝你好运！

Answer 3

在附加HTML后执行吗？如果没有，请尝试使用jQuery live insteed。

$('#variants-button').click(function(){
    $('#information').hide();
    $('#variants').show();
    return false;
});

jQuery UI对话框 - 为自定义按钮添加处理程序

3 个答案: