jQuery onclick 必须单击两次才能出现模式对话框答案

【问题标题】：jQuery onclick have to click twice for modal dialog to appearjQuery onclick 必须单击两次才能出现模式对话框
【发布时间】：2012-03-06 23:33:43
【问题描述】：

此代码有效，但需要单击“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+"/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+"/a/delete?media="+id+"");                                                                                 
            $("#loader-"+id+"").show();                                                                                                                 
        }                                                                                                                                               
    };                                                                                                                                                  
    $("#del-"+id+"").dialog(dialogOpts);                                                                                                                
    return false;                                                                                                                                       
});

});

【问题讨论】：

标签： jquery events triggers click

【解决方案1】：

您尝试在初始化之前打开对话框！

第一次点击，你的对话框被初始化。

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

第二次点击终于打开了。

要么，将调用移至 init 之后和 return false; 之前的方法“open”

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

或者将选项autoOpen改为true，去掉“open”方法调用

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

【讨论】：

天啊！我真是个菜鸟！！谢谢@didier-ghys

【解决方案2】：

看起来您在设置对话框之前调用了 dialog("open")。因此，您必须再次单击该按钮才能将其打开。

试试这个。

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

【讨论】：

【解决方案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+"/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+"/a/delete?media="+id+"");                                                                                 
                $("#loader-"+id+"").show();                                                                                                                 
            }                                                                                                                                               
        });                                                                                                                                                  
        return false;                                                                                                                                       
      });                                                                                                                                                     
    });

【讨论】：

由于autoOpen: false，对话框不会自行打开。
@Didier Ghys tnx 指出了这一点，我复制并粘贴了它！