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

Save the clone to a variable or use the classes option to help add a more unique class. — Twisty
– Twisty, Commented Sep 11, 2019 at 3:18
You can also bind the callback for the button to when you append it or have it work with it's relative parent to target that specific dialog. — Twisty
– Twisty, Commented Sep 11, 2019 at 3:19

ghlee · Accepted Answer · 2019-09-11 03:46:29Z

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)

answered Sep 11, 2019 at 3:46

ghlee

1061 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

IlludiumPu36 Over a year ago

Thanks, I tried that, but on the click handler, returning dialog title doesn't always return the correct title for the dialog with multiple cloned dialogs. How would I get the title of the dialog as parent of the button?

IlludiumPu36 Over a year ago

eg' using something like alert( $(this).parent().find('.ui-dialog-title').val()); in the button click handler

IlludiumPu36 Over a year ago

nether does alert( $(this).parent('.ui-dialog-title'));

ghlee Over a year ago

Can access title element: In handler,$(this).parent().find('.ui-dialog-title') like you. DEMO

IlludiumPu36 Over a year ago

Thanks, I got it working with button.click( function () { alert( $(this).siblings("span.ui-dialog-title").text()); } );

halfer · Accepted Answer · 2021-10-30 23:25:12Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related