jQuery UI 对话框 onClick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10107030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI dialog onClick event
提问by Aaron Lee
i'm trying to open a dialog box with an onclick command, but i'm having no luck whatsoever. I've tried everything and I just can get it to work.
我正在尝试使用 onclick 命令打开一个对话框，但我没有任何运气。我已经尝试了一切，我只能让它工作。
Here the dialog jQuery:
这里的对话框jQuery：
<script type="text/javascript">
$(function runDialog(){
$('#testimonialOpen').dialog({
autoOpen:false
});
})
</script>
There is a div id'd testimonialOpen so I know it's selecting the element, and the dialog box works when the autoOpen is removed, however, when I try and call the function like this:
有一个 div id'd testimonialOpen 所以我知道它正在选择元素，并且在删除 autoOpen 时对话框工作，但是，当我尝试像这样调用函数时：
<p class="topper">Top words<a onClick="runDialog()"><img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/></a></p>
It just does nothing. I tried to use the 'open' command in the jQuery but it still does nothing, any ideas?
它什么都不做。我试图在 jQuery 中使用“打开”命令，但它仍然什么都不做，有什么想法吗？
回答by Rory McCrossan
First of all your ready handler has a syntax error. Secondly, if you're using jQuery you should use it to attach your events, rather than the clunky and outdated onclickattributes.
首先，您准备好的处理程序有语法错误。其次，如果您使用 jQuery，您应该使用它来附加您的事件，而不是笨重和过时的onclick属性。
Try this:
尝试这个：
<p class="topper">
Top words
<a href="#">
<img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/>
</a>
</p>
$(function() {
$('#testimonialOpen').dialog({
autoOpen:false
});
$(".topper a").click(function(e) {
e.preventDefault();
$('#testimonialOpen').dialog('open');
});
});
回答by M Muneer
Try this code
试试这个代码
$(function() {
$("#ok_link").click(function(e) {
e.preventDefault();
$('#dialog-confirm').dialog('open');
});
$( "#dialog-confirm" ).dialog({
resizable: false,
height:160,
modal: true,
minWidth: 400,
autoOpen:false,
buttons: {
"OK": function() {
location.href="index.html";
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<a href="index.html" id="ok_link">OK</a>
<div id="dialog-confirm" title="Are you sure to go home?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>You are about to redirect to home page. Are you sure?</p>
</div>