Question

我读过您应该将Javascript保留在页面的最底部。但是当我这样做时，我得到一个ReferenceError: showDialog is not defined错误，因为我在使用之前引用它。我把它包装在document.ready中但仍然无效。

<a href="javascript:void(0)" onclick="showDialog()">Add New User</a>

$(function() {
    function showDialog() {
        $('#dialog-AddUser').show();
    }
}

Answer 1

$(function () {
    function showDialog() {
        $('#dialog-AddUser').show();
    }
}

这里有范围问题。与文档加载完全无关。请记住，每当您在函数内声明/创建某些内容时，它就是该函数的本地内容。将其移动到整个文档可以看到的外部。

简单写一下

 function showDialog() {
            $('#dialog-AddUser').show();
        }

应该工作。

即使您在文档准备就绪中编写此函数，您的函数也会再次本地化为该特定的就绪函数，并且对外部不可见。

Answer 2

您的函数是在匿名函数的上下文中定义的：

$(function () {
    function showDialog() {
        $('#dialog-AddUser').show();
    }
}

因此无法从该匿名函数的上下文之外调用showDialog。

这里的解决方案是在函数

中添加click事件处理程序

＆＃13;

$(function () {
    function showDialog() {
        console.log('clicked');
        $('#dialog-AddUser').show();
    }
    $('#my-clickable-link').click(showDialog);
});

＆＃13;

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<a href="javascript:void(0)" id="my-clickable-link">Add New User</a>

＆＃13;

然后最终你不需要showDialog函数，只需要另一个匿名函数作为点击处理程序。

＆＃13;

 $(function () {
    $('#my-clickable-link').click(function() {
      $('#dialog-AddUser').show()
    });
});

＆＃13;

<script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
<a href="javascript:void(0)" id="my-clickable-link">Add New User</a>

<div id="dialog-AddUser" style="display:none;">Hello!</div>

＆＃13;

获取定义低于其使用

2 个答案: