为什么这个 jQuery 对话框不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5369616/
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
Why is this jQuery dialog not working?
提问by Or Weinberger
Dialog window is not launched when pressing the link, can you see anything wrong with my JS/HTML code?
按下链接时没有启动对话框窗口，你能看出我的 JS/HTML 代码有什么问题吗？
Thanks.
谢谢。
采纳答案by a1ex07
You have <a href="javascript:forgotPassword();">and forgotPasswordfunction is defined inside $(document).ready. To make it work you need either to move definition of forgotPasswordoutside of readyor do something like
你有<a href="javascript:forgotPassword();">并且forgotPassword函数是在里面定义的$(document).ready。为了使其工作，您需要移动forgotPassword外部的定义ready或执行类似的操作
<a id='my_link' href='javascript:void(0)'>Forgot</a>
$(document).ready(function() {
....
$("#my_link").click(function(e){
$("#forgot-dialog").dialog("open");
});
回答by Blender
I tweaked your code a little bit, so it works now:
我稍微调整了你的代码，现在它可以工作了：
JavaScript:
JavaScript：
$('#forgot').click(function() {
$( "#forgot-dialog" ).dialog( "open" );
});
$(document).ready(function() {
$( "#forgot-dialog" ).dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
HTML:
HTML：
<a href="#" id="forgot">Forgot?</a>
<div id="forgot-dialog" style="display:none;" title="Reset your password">
<form id="forgotform" action="/forgotPassword.php" method="post">
<label for="forgot_email">Email</label>
<input type="text" name="forgot_email" id="forgot_email" class="text ui-widget-content ui-corner-all" value="<?= $fb_email ?>" />
</form>
</div>
Here's a working demo: http://jsfiddle.net/HxbTY/.
这是一个工作演示：http: //jsfiddle.net/HxbTY/。
You weren't including jQuery UI, as dialog()is part of jQuery UI, not jQuery.
您没有包括 jQuery UI，因为它dialog()是 jQuery UI 的一部分，而不是 jQuery。
I'm not sure why that function didn't fire (probably a jsFiddle.net bug), but I added a click()handler to the link to make it work.
我不确定为什么该函数没有触发（可能是 jsFiddle.net 错误），但我向click()链接添加了一个处理程序以使其工作。
回答by JohnP
There were a few problems with your fiddle.
你的小提琴有一些问题。
First, you didn't include the jquery UI as a library so obviously your code will fail. You also need to include the CSS. There were some scope issues as well, I've fixed those and posted the solution
首先，您没有将 jquery UI 作为库包含在内，因此很明显您的代码将失败。您还需要包含 CSS。还有一些范围问题，我已经解决了这些问题并发布了解决方案
http://jsfiddle.net/jomanlk/LtQnT/11/
http://jsfiddle.net/jomanlk/LtQnT/11/
$(document).ready(function() {
$('#theLink').click(function(){
$( "#forgot-dialog" ).dialog( "open" );
});
$( "#forgot-dialog" ).dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
回答by mattsven
回答by ThiefMaster
You are defining the forgotPassword()function in an anonymous scope which is a good thing. However, inline Javascript - which is a bad thing anyway - cannot access it anymore.
您正在forgotPassword()匿名范围内定义函数，这是一件好事。但是，内联 Javascript - 无论如何都是一件坏事 - 无法再访问它。
Use this code instead: <a href="#" id="forgotPasswordLink">Forgot?</a>
请改用此代码： <a href="#" id="forgotPasswordLink">Forgot?</a>
In your on ready code: $('#forgotPasswordLink').click(forgotPassword);- merge those two separate $(document).ready()functions in a single one though: http://jsfiddle.net/ThiefMaster/LtQnT/13/
在您准备好的代码中：$('#forgotPasswordLink').click(forgotPassword);-$(document).ready()虽然将这两个单独的功能合并为一个：http: //jsfiddle.net/ThiefMaster/LtQnT/13/
回答by Waruna Manjula
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$('#theLink').click(function(){
$( "#dialog" ).dialog();
});
} );
</script>
<a id='theLink' href="#">Forgot?</a>
<div id="dialog" title="Forgot Password" style="display:none;">
<div id="forgot-dialog" title="Reset your password">
<form id="forgotform" action="/forgotPassword.php" method="post">
<label for="forgot_email">Email</label>
<input type="text" name="forgot_email" id="forgot_email" class="text ui-widget-content ui-corner-all" value="<?= $fb_email ?>" />
</form>
</div>
</div>
