为什么我们在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成语).除非您喜欢输入额外的字符,否则没有理由使用该表单.