button click event not working in a pop up

Question

The button click event doesn't fire when in pop up window however out of pop up window it works fine, in Html the commented part is where I called the button event out of pop up window and it works fine but in pop up window nothing happens when I click the "Save" button. Here is my code

  <script>

    $(function () {

         $("#dialog-1").dialog({
             autoOpen: false,
         });

         $("#opener").click(function () {
             $("#dialog-1").dialog("open");

         });
     });
  </script>

Html

         <%--<asp:Button Text="save" class="btn btn-danger" runat="server"  CausesValidation="false" OnClick="SaveDB" />
           <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>--%>

<button type="button" class="btn btn-warning" id="opener" > Create Database       </button>         
               <div id="dialog-1" title="Add new Database">
    Database name: <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
    <asp:Button Text="Save" class="btn btn-danger" runat="server"  CausesValidation="false" OnClick="SaveDB" style="padding-left:2%;padding-right:2%;" /> 
  </div>

aspx.cs file code

   protected void SaveDB(object sender, EventArgs e)
  { 
       TextBox1.Text="It works";
  }

Answer 1

Try attaching the event handler to the body instead like this:

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

The issue may be that the #opener element doesn't exist in the DOM when the handler is set up, but attaching to the body would solve that issue.