jQuery onclickは、モーダルダイアログを表示するために2回クリックする必要があります

Question

このコードは機能しますが、クラス「genbutton-delete」の要素は2回クリックする必要があります。誰かが私を助けてくれる？

$(document).ready(function(){                                
$(".genbutton-delete").click(function(){                             
    var id = $(this).attr("id");                               
    $("#del-"+id+"").dialog("open");                              
    var dialogOpts = {                                 
     modal: true,                                  
     bgiframe: true,                                 
     autoOpen: false,                                 
     width: 400,                                  
     buttons: {                                  
      "Delete": function() {                              
       $.ajax({                                 
        type: "post",                              
        url: ""+siteURL+"https://stackoverflow.com/a/delete?media="+id+"",                       
        data: "delete=1",                             
        success: function(data) {location.href="?delete=1";}                     
       });                                  
      },                                   
      "Cancel": function() {$(this).dialog("close");}                        
     },                                    
     open: function() {                                
      $("#del-"+id+"").load(""+siteURL+"https://stackoverflow.com/a/delete?media="+id+"");                     
      $("#loader-"+id+"").show();                             
     }                                    
    };                                     
    $("#del-"+id+"").dialog(dialogOpts);                             
    return false;                                  
});                                      

}）;

Answer 1

初期化する前にダイアログを開いてみてください！

最初にクリックすると、ダイアログが初期化されます。

$("#del-"+id+"").dialog("open"); // does nothing 
// init the dialog but does not open because autoOpen: false 
$("#del-"+id+"").dialog(dialogOpts); 

2回目のクリックで最終的に開きます。

---

どちらのは、初期化後とreturn false;

$("#del-"+id+"").dialog(dialogOpts); 
$("#del-"+id+"").dialog("open"); 
return false; 

それとも trueにオプションautoOpenを変更し、「オープン」メソッドの呼び出しを削除する前に、「オープン」メソッドの呼び出しを移動します

//$("#del-"+id+"").dialog("open");                              
var dialogOpts = {                                 
    ...                                
    autoOpen: true,                                 
    ...                                    
};                                     
$("#del-"+id+"").dialog(dialogOpts); 

Answer 2

ダイアログが表示される前に、ダイアログ（「開く」）が表示されているようですすべての設定。したがって、ボタンをもう一度クリックして開く必要があります。

これを試してください。

$(document).ready(function(){                                
$(".genbutton-delete").click(function(){                             
    var id = $(this).attr("id");                                                         
    var dialogOpts = {                                 
     modal: true,                                  
     bgiframe: true,                                 
     autoOpen: false,                                 
     width: 400,                                  
     buttons: {                                  
      "Delete": function() {                              
       $.ajax({                                 
        type: "post",                              
        url: ""+siteURL+"https://stackoverflow.com/a/delete?media="+id+"",                       
        data: "delete=1",                             
        success: function(data) {location.href="?delete=1";}                     
       });                                  
      },                                   
      "Cancel": function() {$(this).dialog("close");}                        
     },                                    
     open: function() {                                
      $("#del-"+id+"").load(""+siteURL+"https://stackoverflow.com/a/delete?media="+id+"");                     
      $("#loader-"+id+"").show();                             
     }                                    
    };                                     
    $("#del-"+id+"").dialog(dialogOpts);  
    $("#del-"+id+"").dialog("open"); 
    return false;                                  
}); 

Answer 3

他の答えは正しいですが、あなたのコードから、私は別々にそれを初期化して表示する必要はありません見ることができます、あなたはjQueryの-UIの最新バージョンを使用している特別な場合、あなたは文句を言わないでも心配する必要がありますそれを開いたり閉じたりして、同じ要素をダイアログに再利用します。

$(document).ready(function(){                                
     $(".genbutton-delete").click(function(){                             
     var id = $(this).attr("id");                               
     $("#del-"+id+"").dialog({                                                            
      modal: true,                                  
      bgiframe: true,                                 
      autoOpen: true,                                 
      width: 400,                                  
      buttons: {                                  
       "Delete": function() {                              
        $.ajax({                                 
         type: "post",                              
         url: ""+siteURL+"https://stackoverflow.com/a/delete?media="+id+"",                       
         data: "delete=1",                             
         success: function(data) {location.href="?delete=1";}                     
        });                                  
       },                                   
       "Cancel": function() {$(this).dialog("close");}                        
      },                                    
      open: function() {                                
       $("#del-"+id+"").load(""+siteURL+"https://stackoverflow.com/a/delete?media="+id+"");                     
       $("#loader-"+id+"").show();                             
      }                                    
     });                                     
     return false;                                  
     });                                      
    });