ボタンをクリックするとjqueryが2番目のダイアログボックスを開くのを防ぐ

Question

2レイヤーのリーフレットマップがあります。「保存」ボタンをクリックすると、フォームにダイアログボックスが表示され、データベース。

最初のレイヤーが選択され、「保存」ボタンをクリックすると、最初のレイヤーに対応するダイアログボックスが開きます。

しかし、2番目のレイヤーが選択され、「保存」ボタンをクリックすると、2番目のレイヤーに対応するダイアログボックスが開きますが、1番目のレイヤーの直前に開いたフォームも開きます。

したがって、このフォームを開くことはできませんか？ 対応していないフォーム上の.dialog（ 'close'）を実行すると動作しますが、開いて閉じていることがわかるので、それは本当に良いことではありません！

私はすでに.dialog（ "destroy"）をテストしています。と.remove（）; DOM内のダイアログボックスは削除され、後で別のダイアログボックスを開くことはできません。

ので、ここでいくつかのコードは次のとおりです。

//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

Answer 1

あなたの二つのボタンの保存、それぞれの層のために、同じIDを持っているようです。おそらく、あなたの "onclick"リスナーをインストールするときに競合がありますか？だから行動はあなたが期待するものではありません。 これらのボタンのユニークなIDを設定しようとしてください