javascript - JQuery - 如何在多个 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按钮，以便在单击相关时执行操作(将Dialog中的文本保存为PDF...) PDF 按钮。

如何在克隆的对话框中找到并定位正确的 PDF 按钮上的单击事件？

参见Fiddle

Answer 1

只需在追加之前将事件绑定(bind)到元素即可。

$(".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元素