2012-04-12 60 views
2

我想调用一个超链接的jquery onclick。但是现在对话每次都会出现页面加载。我使用这个example的jQuery示例。页面加载时调用jquery

$(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      width:500, 
      height:140, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        $(this).dialog("close"); 
        autoGeneration(); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 

和HTML:

<div id="dialog-confirm" title="Overwrite?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Will be overwrite. continue?</p> </div> 

<a href="#" id="dialog-confirm" class="bigButton">AUTO GENERATION</a> 

我想从上的点击以下链接调用,避免调用页面的对话框每次onload事件。

感谢大家的回答。

回答

1

对话框的autoOpten选项设置为false:

$(function() { 
    $("#dialog-confirm").dialog({ 
     autoOpen: false 
     //other options 
    }); 
}); 

更改链接的ID,因此,它比对话框DIV的不同:

<a href="#" id="openDialog" class="bigButton">AUTO GENERATION</a> 

然后只需拨打open对话:

$("#openDialog").click(function(e){ 
    e.preventDefault(); 
    $("#dialog-confirm").dialog("open"); 
}); 
+0

我试图像我们的代码。但是当我点击链接时,对话框不会出现。 – kitokid 2012-04-12 09:14:34

+0

@PTY,你是从字面上复制/粘贴我的代码吗?如果是这样,我有一个错字:我有一个额外的逗号:'autoOpen:false,'。如果您没有将其他选项传递给对话框,请在'false'后删除逗号并且它应该可以工作。 – 2012-04-12 09:28:21

+0

嗯..我忘了包括 。谢谢。 – kitokid 2012-04-13 03:20:44

1
$(function() { 
     $("#dialog-box").dialog({ 
      autoOpen: false, 
      resizable: false, 
      width:500, 
      height:140, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        $(this).dialog("close"); 
        autoGeneration(); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    $("#dialog-confirm").click(function() { 
     $("#dialog-box").dialog("open"); 
     return false; 
    }); 

    }); 

你需要不同的ID为“链接”和“对话”,以便改变对话框,确认以对话盒

<div id="dialog-box" title="Overwrite?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Will be overwrite. continue?</p> </div> 

<a href="#" id="dialog-confirm" class="bigButton">AUTO GENERATION</a> 
+0

加一。感谢您的详细解释。 – kitokid 2012-04-13 03:22:33

0

首先设置对话框autoOpen属性false阻止它在页面加载开幕。

$(function() { 
    $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     resizable: false, 
     width:500, 
     height:140, 
     modal: true, 
     buttons: { 
      "Confirm": function() { 
       $(this).dialog("close"); 
       autoGeneration(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
}); 

然后在链接的点击处理程序打开它:

$("#dialog-confirm").click(function(e) { 
    e.preventDefault; 
    $("#dialog-confirm").dialog('open'); 
}); 
0

你应该做的

var dialog = $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     resizable: false, 
     width:500, 
     height:140, 
     modal: true, 
     buttons: { 
      "Confirm": function() { 
       $(this).dialog("close"); 
       autoGeneration(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
    }); 

$('a.bigButton').click(function(e){ 
    e.preventDefault(); 
    dialog.dialog("open"); 
}); 
+0

当我像上面那样尝试时,好像div标签中的文字出现在页面上。 – kitokid 2012-04-12 09:27:30

+0

@PTY当然,div必须隐藏,只需在其上设置style =“display:none”即可 – 2012-04-12 09:32:12