Question

I am trying to bind an event to all dialogs that have been created on a page using the JQuery UI Dialog function (whether they have been displayed or not). I can’t seem to figure out a selector that will get me there. I’ve tried both .ui-dialog and .ui-dialog-content without success.

Since I’m trying to make a generic method, I won’t know the IDs of the dialogs that may have been created.

I’m using the following code to test. It works if I specify a dialog’s id (#mydialog), but in production, I won’t know these.

$("div.ui-dialog").bind("dialogclose", function(event, ui) {
  window.alert("close fired");
}

Answer 1

Do your dialogs have a common class that you can select them with? If they all have the “ui-dialog” class then this will work:

$(".ui-dialog")

Your example of

$("div.ui-dialog")

Is asking to select all divs with a class of ui-dialog, which should probably also work as long as the class is given to a div element.

Your problem might be that you binding the dialog elements before they exist? You might want the .live() function instead so that it binds to any dialogs created at any point and not just the ones that exist when the function is called.

Posting an HTML snippet would help.