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

Question

I am cloning multiple instances of a 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>");
        }
    });
});

On Dialog open, I am then appending a button with class='dialog_pdf_button' to the cloned Dialog title bar.

I need to target the correct PDF button on the cloned Dialogs to perform an action (save text in Dialog to PDF...) on click of the related PDF button.

How can I find and target for a click event on the correct PDF buttons in the cloned Dialogs?

See Fiddle

Answer 1

Just bind events to element before append.

$(".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;
});

You can create jquery element dynamically with $(HTML_TEMPLATE)

Answer 2

I would advise making the button after creating the dialog. This way you can assign it to the dialog and assign a callback.

Here is a working example:

$(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>

After Dialog is initialized, we can then add items to its widget such as a PDF Button. This gives you a reference to the dialog itself and the button. So if you had to get a specific part of the dialog, title or body, the callback can do that.