下面的 HTML 将显示一个带有 2 个按钮的页面。一个人将以正常方式打开一个 JQuery 对话框 - 并且工作正常。
另一个按钮是尝试以非 jquery 函数的形式打开对话框 - 但它不起作用。我知道第二个按钮不是应该如何完成的 - 但由于我将跳过此处解释的原因,我想知道这是否可能?
我是 jquery 的新手——所以我确信在命名空间等方面有一些基本的东西我目前并不完全理解。尝试了多种方法使其无法成功运行后-我现在请教如何做到这一点。更一般的问题是关于“普通”javascript 如何引用和操作 JQuery 函数。
可以做到吗?
<!doctype html>
<html>
<head>
<title>My Dialog demo</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $dialog = $('<div></div>')
.html('My Dialog Demo...')
.dialog({
autoOpen: false,
title: 'My Dialog'
});
$('#Button1').click(function () {
$dialog.dialog('open');
return false; ////cancel eventbubbeling
});
});
function showDialog() {
$dialog.dialog('open');
return false //cancel eventbubbeling
}
</script>
</head>
<body>
<!-- JQuery autowired event-->
<button id="Button1">Open dialog (JQuery event wireup)</button>
<!-- Manual -->
<button id="Button2" onclick="showDialog();">Open (manual onClick event)</button>
</body>
</html>