为什么我们在 JS 中使用类似 $(function() { }) 的语法？

Question

当我使用此代码时，它将我的 $.post() 绑定到一个表单并阻止重新加载页面以提交它：

$("#analyze_audio").submit(function (e) {
    debugger;
    e.preventDefault();
    var url = "/analyze_audio";
    var dataToSend = {"analyze_audio": "analyze_audio"};
    var callback = function (data) {
        debugger;
        document.getElementById("audioresponse").innerHTML = (data);
    };
    $.post(url, dataToSend, callback, 'html');
});

但它不会触发我在其中使用的调试器，因此它不会正确地将事件绑定到我的函数。但是当我使用这个代码片段时，它完美地工作：

$(function() {
    $("#analyze_audio").submit(function (e) {
        debugger;
        e.preventDefault();
        var url = "/analyze_audio";
        var dataToSend = {"analyze_audio": "analyze_audio"};
        var callback = function (data) {
            debugger;
            document.getElementById("audioresponse").innerHTML = (data);
        };
        $.post(url, dataToSend, callback, 'html');
    });
});

我真的不明白为什么？

Answer 1

当你使用 jQuery 时（你显然是），在 $( ) 中包装一个函数使其成为一个函数，当 "DOM ready" 事件发生时由库调用从浏览器收到。因此，它会推迟执行您的代码，直到 DOM 完全构建。这使您的代码可以工作，因为它确保了具有 id "analyze_audio" 的元素存在。

$( ) 在语法上没有什么特别之处——它只是一个简单的函数调用，调用一个名为 $ 的函数（这是 jQuery 库的主要入口点）。

您可能会看到执行类似操作的代码：

$(document).ready(function() { ... });

这完全一样（而且也是 jQuery 成语）。除非您喜欢输入额外的字符，否则没有理由使用该表格。

Answer 2

$(函数() {});只是 document.ready 的快捷方式。它会像这样工作：

<script type="text/javascript">
        $(document).ready(function() {
            $("#analyze_audio").submit(function (e) {
                debugger;
                e.preventDefault();
                var url = "/analyze_audio";
                var dataToSend = {"analyze_audio": "analyze_audio"};
                var callback = function (data) {
                    debugger;
                    document.getElementById("audioresponse").innerHTML = (data);
                };
                $.post(url, dataToSend, callback, 'html');
            });
        });
    </script>

Answer 3

当您将事件绑定到表单 #analyze_audio 时，它还没有出现在 DOM 中。如果您将脚本放在带有表单的 html 之后，那么它将起作用。或者你可以使用 $(document).ready() 添加你的绑定或者只是 $(function(){}) 这两个函数将在整个页面加载时执行。

为什么我们在 JS 中使用类似 $(function() { }) 的语法？

Why we use $(function() { }) like syntax in JS?

javascript

jquery

event-handling

javascript-events