title: How to open the same jQuery Dialog from dynamically and non-dynamically created controls
body: <p>I need to open the same jQuery dialog from different input text controls (including those that have been created dynamically)
  This is what my page displays when it loads for the first time.<img src="https://i.stack.imgur.com/ZELj1.jpg" alt="enter image description here">
  When the user presses the "Add" button a new row is added to the table
  <img src="https://i.stack.imgur.com/D1soy.jpg" alt="enter image description here"></p>
  
  <p>So far so good. The problem comes when I have to open the dialog that will let users enter text into the inputs ( the dialog will display upon clicking on them) 
  At first , I thought it would only be necessary to add a class to all the controls  and then using the class selector just call the dialog.
  Unfortunately then I learned that with dynamic controls you have to use ".on" to attach them events.
  Once overcome these difficulties , I run into one more that I haven't been able to solve yet. This is that if you don't want the dialog to be automatically open upon initialization, you have to set "autoOpen" to false. I did so but the only result I got was that none on the inputs worked.
  I have also tried putting all the code ,regarding the dialog, into a function and then calling that function when an input is clicked 
  I did also try declaring a variable and setting that variable to the dialog , something like this: </p>
  
  <pre><code>var dialog= $( "#dialog" )
  </code></pre>
  
  <p>But it didn't work either
  I have tried some possibles solutions , but no luck as of yet.</p>
  
  <p><strong>EDIT : Here's a fiddle so you can have a better idea of what I'm talking about:</strong> </p>
  
  <p><a href="http://jsfiddle.net/3BXJp/" rel="nofollow noreferrer">http://jsfiddle.net/3BXJp/</a></p>
  
  <p><strong>Full screen result:</strong> <a href="http://jsfiddle.net/3BXJp/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/3BXJp/embedded/result/</a></p>
  
  <p>Here is the html code for the aspx page (Default.aspx):</p>
  
  <pre><code> &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Expression Builder&lt;/legend&gt;
              &lt;table id="myTable" class="order-list"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;td colspan="2"&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td style="text-align: right;"&gt;
                              IF(&lt;input type="text" name="condition1" class="showDialog" /&gt;
                              :
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" name="trueValue" class="showDialog" /&gt;
                              )
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;a class="deleteRow"&gt;&lt;/a&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;tfoot&gt;
                      &lt;tr&gt;
                          &lt;td colspan="5" style="text-align: left;"&gt;
                              &lt;input type="button" id="addrow" value="+ Add" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td colspan=""&gt;
                              ELSE (
                              &lt;input type="text" name="else" id="else" class="showDialog" /&gt;)
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tfoot&gt;
              &lt;/table&gt;
          &lt;/fieldset&gt;
          &lt;br /&gt;
          &lt;input type="button" id="btnEnviar" value="Send" /&gt;
      &lt;/div&gt;
      &lt;div id="dialog-form" title="Add New Detail"&gt;
          &lt;p&gt;
              All the fields are required.&lt;/p&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;label for="condition" id="lblcondition"&gt;
                          Condition&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="condition" id="condition" class="text ui-widget-content ui-corner-all" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;label for="returnValue" id="lblreturnValue"&gt;
                          Return Value&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" name="returnValue" id="returnValue" class="text ui-widget-content ui-corner-all" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>and here is the javascript code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var counter = 0;
          $("button, input:submit, input:button").button();
          $('input:text').addClass("ui-widget ui-state-default ui-corner-all");
          var NewDialog = $("#dialog-form");
          NewDialog.dialog({ autoOpen: false });
          var Ventana = $("#dialog-form");
          $("#addrow").on("click", function () {
  
              var counter = $('#myTable tr').length - 2;
  
              $("#ibtnDel").on("click", function () {
                  counter = -1
              });
  
              var newRow = $("&lt;tr&gt;");
              var cols = "";
  
              cols += '&lt;td&gt;ELSE IF(&lt;input type="text" name="condition' + counter + '" class="showDialog1" /&gt; &lt;/td&gt;';
              cols += '&lt;td&gt;: &lt;input type="text" name="TrueValue' + counter + '" class="showDialog1" /&gt;)&lt;/td&gt;';
  
              cols += '&lt;td&gt;&lt;input type="button" id="ibtnDel"  value="-Remove"&gt;&lt;/td&gt;';
              newRow.append(cols);
              var txtCondi = newRow.find('input[name^="condition"]');
              var txtVarlorV = newRow.find('input[name^="TrueValue"]');
              newRow.find('input[class ="showDialog1"]').on("click", function () {
  
                  //Seleccionar la fila
                  $(this).closest("tr").siblings().removeClass("selectedRow");
                  $(this).parents("tr").toggleClass("selectedRow", this.clicked);
  
                  Ventana.dialog({
                      autoOpen: true,
                      modal: true,
                      height: 400,
                      width: 400,
                      title: "Builder",
                      buttons: {
                          "Add": function () {
                              txtCondi.val($("#condition").val());
                              txtVarlorV.val($("#returnValue").val());
                              $("#condition").val("");
                              $("#returnValue").val("");
                              $(this).dialog("destroy");
                          },
                          Cancel: function () {
                              //dialogFormValidator.resetForm();
                              $(this).dialog("destroy")
                          }
  
                      },
  
                      close: function () {
                          $("#condition").val("");
                          $("#returnValue").val("");
                          $(this).dialog("destroy")
                      }
                  });
                  return false;
  
              });
  
              $("table.order-list").append(newRow);
              counter++;
              $("button, input:submit, input:button").button();
              $('input:text').addClass("ui-widget ui-state-default ui-corner-all");
  
  
          });
  
  
          $("table.order-list").on("click", "#ibtnDel", function (event) {
              $(this).closest("tr").remove();
          });
          $("#btnEnviar").click(function () {
  
              //Armo el objeto que servira de parametro, para ello utilizo una libreria JSON
              //Este parametro mapeara con el definido en el WebService
              var params = new Object();
              params.Expresiones = armaObjeto();
              $.ajax({
                  type: "POST",
                  url: "Default.aspx/Mostrar",
                  data: JSON.stringify(params),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (data, textStatus) {
                      if (textStatus == "success") {
                          loadMenuVar(data);
                      }
                  },
                  error: function (request, status, error) {
                      alert(jQuery.parseJSON(request.responseText).Message);
                  }
  
              });
  
          });
  
          $(".showDialog").click(function () {
  
              Ventana.dialog({
                  autoOpen: true,
                  modal: true,
                  height: 400,
                  width: 400,
                  title: "Constructor",
                  buttons: [
                      { text: "Submit", click: function () { doSomething() } },
                      { text: "Cancel", click: function () { $(this).dialog("destroy") } }
                            ],
  
                  close: function () {
                      $(this).dialog("option", "autoOpen", false);
                      $(this).dialog("destroy")
  
                  }
              });
              return false;
          });            
  
      });
  </code></pre>
  
  <p>This is the closest I've been able to get to the solution, but <strong>still can't get the dialog to remain hidden until a input is clicked</strong></p>
  
  <p><img src="https://i.stack.imgur.com/KySuF.jpg" alt="enter image description here"></p>
  
  <p>Any advise or guidance would be greatly appreciated.
  P.S. Sorry for my bad english </p>