I am using oj-dialog box , on close (x) icon I want to trigger an event but I am not able to capture

Content

PFB the oj-dialog code

 

<oj-dialog style="display:none" id="modalDialog1" dialog-title="Modal Dialog">
              <div slot="body">
                The dialog window can be moved, resized and closed with the 'x' icon.
                Arbitrary content can be added to the the body and footer sections.
              </div>
              <div slot="footer">
                <oj-button id="okButton" on-oj-action="[[close]]">OK
                </oj-button>
              </div>
            </oj-dialog>

I want to link custom event for close icon , class:oj-dialog-header-close-wrapper , but not sure why the binding is not possible on internal classes and id's of oj-dialog box.

I am using below code to link.

 

$( ".oj-dialog-header-close-wrapper" ).bind( "click", function() {

  alert( "User clicked on 'foo.'" );