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://*.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://*.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://*.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://*.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://*.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://*.com/a/delete?media="+id+"");                     
       $("#loader-"+id+"").show();                             
      }                                    
     });                                     
     return false;                                  
     });                                      
    });