title: Prevent jquery ui opening a second dialog box when clicking on a button
body: <p>I have a leaflet map with 2 layers and when I'm clicking a button "save", it opens a dialog box with a form to send some informatons to my database.</p>
  
  <p>When my first layer is selected and I'm clicking on my "save" button, it opens the dialog box corresponding to my first layer.</p>
  
  <p>But then, when my second layer is selected and I'm clicking on my "save" button, it opens the dialog box corresponding to my second layer, but also the form I've opened just before for my first layer.</p>
  
  <p>So, is it possible prevent the opening of this form ?
  Because if I do a .dialog('close'), it on the form not corresponding, it works but we can see it opening and then closing, so that's not really good !</p>
  
  <p>I have already tested .dialog("destroy"); and .remove(); but it removes my dialog boxes in the DOM and I can't open them other times after.</p>
  
  <p>So, here is some code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//Code in the oneachfeature function from my layer1
   
  $('#save').on('click',function(e){
  var dialog1 = $("#dialog1").dialog({
                              autoOpen: false,
                              modal: true,
                              show: {
                                    effect: "blind",
                                    duration: 500
                                  },
                              hide: {
                                    effect: "blind",
                                    duration: 500
                                  },
                              close: function(event, ui) {
                                      //$(this).dialog("destroy");
                                      //$(this).dialog("close");
                                      //$(this).remove();
                                  },
                              height: 400,
                              width: 500,
                              modal: true,
                              position: {
                                  my: "center center",
                                  at: "center center",
                                  of: "#map"
                                  },
                              buttons: {
                              Valider: function() {
                                           
                                          // Ajax to send informations in the form
   
                                          }, // end of valider
                              Annuler: function() {
                                          dialog1.dialog("close");
                                          },
                                      }, // end of buttons                
                                  }); // end of dialog
   
                              dialog1.dialog("open"); 
  
                              $("#dialog2").dialog('close');
   
                          });   // end of save
   
   
   
   
  //Code in the oneachfeature function from my layer2
   
  $('#save').on('click',function(e){
  var dialog2 = $("#dialog2").dialog({
                              autoOpen: false,
                              modal: true,
                              show: {
                                    effect: "blind",
                                    duration: 500
                                  },
                              hide: {
                                    effect: "blind",
                                    duration: 500
                                  },
                              close: function(event, ui) {
                                      //$(this).dialog("destroy");
                                      //$(this).dialog("close");
                                      //$(this).remove();
                                  },
                              height: 400,
                              width: 500,
                              modal: true,
                              position: {
                                  my: "center center",
                                  at: "center center",
                                  of: "#map"
                                  },
                              buttons: {
                              Valider: function() {
                                           
                                          // Ajax to send informations in the form
   
                                          }, // end of valider
                              Annuler: function() {
                                          dialog2.dialog("close");
                                          },
                                      }, // end of buttons                
                                  }); // end of dialog
   
                              dialog2.dialog("open"); 
                           
                              $("#dialog1").dialog('close');
   
                          });   // end of save</code></pre>
  </div>
  </div>
  </p>