jQuery Open Dialog From Added Script

Question

I created a very simple example of my problem. So I have a button (Add context) that adds some html to body, in fact the html here is a button (Added Opener) that should open a simple jquery dialog. However it will not work because at this point DOM ready is already executed. I added another button (Original Opener) which is executed before DOM is ready and that button works fine. My question, how can I make Added Opener button to work so it can open a dialog after DOM ready?

<html>
    <head>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
     <script>
      $( function() {
        $( "#dialog" ).dialog({
          autoOpen: false
        });

        $( "#opener" ).on( "click", function() {
          $( "#dialog" ).dialog( "open" );
        });

          $( "#ContextButton" ).on( "click", function() {
          $("body").prepend('<button id="opener">Added Opener</button>');
        });
      } );
      </script>
    </head>
    <body>
    <div id="dialog" title="Basic dialog">
      <p>This is a basic dialog</p>
    </div>
     <button id="opener">Original Opener</button> 
     <button id="ContextButton">Add context</button> 
   </body>
 </html>

bipen · Accepted Answer · 2016-07-21 21:17:34Z

1

Use on delegated event for dynamically added elements.

$('body').on("click", "#opener", function() {
     $( "#dialog" ).dialog( "open" );
});

I would recommend you to go search for similar kind of issues(in stackoverflow) first before posting a question. Anyways Please search for it again so that you know why do we have to use delegated event.

answered Jul 21, 2016 at 21:17

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

jQuery Open Dialog From Added Script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related