JQuery

Question

我正在克隆多个个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 标题栏。

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

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

见Fiddle

Answer 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 元素

Answer 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 按钮。这为您提供了对对话框本身和按钮的引用。因此，如果您必须获取对话框的特定部分、标题或 body，回调可以做到这一点。

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

JQuery - How to target correct button in multiple JQuery cloned Dialogs?

javascript

jquery-ui

jquery-ui-dialog