jquery event on Modal dialog close button

Question

I have a modal dialog region in my oracle apex page. The region has inline dialog template. I want to trigger an action when the user clicks the close button of the dialog . So I write the code

$(".ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close").click(function (e) {
      alert('Hi');
      // actions
}); 

The HTML code of the dialog close button is

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" 
role="button" aria-disabled="false" title="Close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">Close</span></button>

But it doesn't work. What might be wrong with me?

Answer 1

Change your code to:

$(".ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click(function (e) {
  alert('Hi');
  // actions
});

Your <button> element have multiple selectors, so you need to use a period for all selectors and with no space (because these all are declare same element).

Also, if you use only one selector, it will be more clear. You don't need to use all selectors.

Like:

$(".ui-button").click(function (e) { alert('Hi'); // actions });

Answer 2

Its look like you have entered the wrong class in the selector

 jQuery(document).ready(function(){ $(".ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click(function (e) { alert('Hi'); // actions }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="Close"> <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span> <span class="ui-button-text">Close</span></button>