JQuery - 如何在多个 JQuery 克隆对话框中定位正确的按钮？答案

【问题标题】：JQuery - How to target correct button in multiple JQuery cloned Dialogs?JQuery - 如何在多个 JQuery 克隆对话框中定位正确的按钮？
【发布时间】：2020-01-12 19:27:18
【问题描述】：

我正在克隆多个 JQuery Dialog 的实例：

$('#button').click(function() {
    $('.dialog').clone().appendTo('body').removeClass('dialog').dialog({
        width: '300',
        height: '200',
        dialogClass: 'dialogClass',
        open: function(event, ui) {
            $(".dialogClass").children(".ui-dialog-titlebar").append("<button class='dialog_pdf_button' type='button'>PDF</button>");
        }
    });
});

在Dialog open 上，然后我将带有class='dialog_pdf_button' 的按钮附加到克隆的Dialog 标题栏。

我需要在克隆的Dialogs 上定位正确的 PDF 按钮，以在单击相关 PDF 按钮时执行操作（将 Dialog 中的文本保存到 PDF...）。

如何在克隆的Dialogs 中找到正确 PDF 按钮上的点击事件并定位到该事件？

见Fiddle

【问题讨论】：

将克隆保存到变量或使用classes 选项来帮助添加更独特的类。
您还可以将按钮的回调绑定到当您追加它或让它与它的相对父对象一起工作以定位该特定对话框时。
你能在小提琴中证明这一点并提供答案吗？

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

在追加之前将事件绑定到元素。

$(".dialogClass").children(".ui-dialog-titlebar").append(function () {
  var button = $("<button class='dialog_pdf_button' type='button'>PDF</button>");
  button.click(function () {
    // Event handler
  });

  // Or other event..

  return button;
});

您可以使用$(HTML_TEMPLATE)动态创建jquery元素

【讨论】：

谢谢，我试过了，但是在点击处理程序上，返回的对话框标题并不总是为带有多个克隆对话框的对话框返回正确的标题。我如何将对话框的标题作为按钮的父级？
eg' 使用类似 alert( $(this).parent().find('.ui-dialog-title').val());在按钮点击处理程序中
下界会提醒($(this).parent('.ui-dialog-title'));
可以访问标题元素：在处理程序中，$(this).parent().find('.ui-dialog-title') 喜欢你。 DEMO
谢谢，我用 button.click( function () { alert( $(this).siblings("span.ui-dialog-title").text()); } ) ;

【解决方案2】：

我建议在创建对话框后制作按钮。这样您就可以将其分配给对话框并分配回调。

这是一个工作示例：

$(function() {
  $('#button').click(function() {
    var c = $(".ui-dialog").length;
    var dlg = $("<div>").appendTo('body');
    dlg.dialog({
      width: '300',
      height: '200',
      dialogClass: 'dialogClass',
      title: "Dialog " + (c + 1)
    });
    var btn = $("<button>", {
      class: "ui-dialog-titlebar-pdf-btn",
      type: "button"
    }).html("PDF").button().click(function(e) {
      console.log("PDF Button Clicked in " + dlg.dialog("widget").find(".ui-dialog-title").text());
    }).appendTo(dlg.dialog("widget").find(".ui-dialog-titlebar"));
  });
});

.dialogClass .ui-dialog-titlebar span.ui-dialog-title {
  width: 75%;
}

.dialogClass .ui-dialog-titlebar button.ui-dialog-titlebar-pdf-btn {
  font-size: .65em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="button">Make Dialog</button>

Dialog 初始化后，我们可以向它的小部件添加项目，例如 PDF 按钮。这为您提供了对对话框本身和按钮的引用。因此，如果您必须获取对话框、标题或正文的特定部分，回调可以做到这一点。

【讨论】：