Question

下面的HTML将显示包含2个按钮的页面。一个人会以正常方式打开一个JQuery对话框 - 并且工作正常。

另一个按钮是尝试从非jquery函数打开对话框 - 但它无法正常工作。我觉得第二个按钮不是应该怎么做的 - 但是由于我将跳过这里解释的原因，我想知道这是否可行？

我是jquery的新手 - 所以我确信有一些基本的东西是abount命名空间等，我现在还不完全理解。尝试了很多方法让它无法成功 - 我现在要求就如何做到这一点提出建议。更一般的问题是关于“普通”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>

Answer 1

让$dialog像这样全球化

<script type="text/javascript">
        var $dialog; 
        $(document).ready(function () {
            $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>

从onclick调用JQuery对话框

1 个答案: