jQuery onclick必須單擊兩次以顯示模式對話框

Question

此代碼可以工作，但類「genbutton-delete」的元素需要點擊兩次才能工作。有人可以幫我嗎？

$(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); 

第二次點擊它終於打開。

---

無論，將調用方法「開放式」的初始化後，與return false;

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

或者更改之前的選項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;                                  
     });                                      
    });