附加 jQuery 代码以在加载和按钮单击时运行

Attach jQuery code to run onLoad and on button click?

本文关键字：按钮 单击 运行 加载 jQuery 代码 附加      更新时间：2023-09-26

我有以下代码，它获取用户的当前邮政编码并在div中显示它：

(function ($, geolocation) {
    if (geolocation) {
        geolocation.getCurrentPosition(function (position) {
            $.getJSON(
                "http://ws.geonames.org/findNearestAddressJSON?callback=?",
                {
                    lat : position.coords.latitude,
                    lng : position.coords.longitude
                },
                function (data) {
                    $(function () {
                        $('#zip').text(data.address.postalcode);
                    });
                }
            );
        });
    }
}(jQuery, navigator.geolocation));

我相信代码运行on document ready。这与运行onLoad的代码相同吗？无论如何，是否可以在单击按钮时运行此代码？我以为这样的事情会起作用，但是使用它不会产生邮政编码on document ready，或者在单击按钮时：

function update() {
    ...code from above
}
$('#button').click(function(){update();});

这不会在 document.ready 上运行，除了代码的一部分（function (data) { }调用中的代码）。

不，document.ready与onLoad不同. document.ready是指可以通过Javascript访问DOM（但不一定渲染/获取）; onLoad是当所有内容都已加载（并且可能---图像等进行渲染）时。

要在单击按钮时运行相同的功能，您已经或多或少地走上了正确的轨道。您需要对该函数的引用：

var update = function ($, geolocation) {
    // blah
};
// this will call the same function like you're doing above
update(jQuery, navigator.geolocation);

然后通过点击处理程序运行它：

// don't forget that this has to be in a document.ready handler
jQuery(function ($) {
    $('#button').click(function () { update($, navigator.geolocation); });
});

将代码放在其自己的函数中，并在加载时调用该函数。然后让你的按钮onclick(getZipCode())，它也将调用相同的函数。如果您不希望它加载，请将其从$(function() {}); jQuery中删除。

$(function() {
    //On Document Ready, call getZipCode
    getZipCode(navigator.geolocation);
});
function getZipCode(geolocation) {
    if (geolocation) {
        geolocation.getCurrentPosition(function (position) {
           $.getJSON(
               "http://ws.geonames.org/findNearestAddressJSON?callback=?",
                {
                    lat : position.coords.latitude,
                    lng : position.coords.longitude
                },
                function (data) {
                    $(function () {
                        $('#zip').text(data.address.postalcode);
                    });
                }
            );
        });
    }
}

我相信代码在文档就绪上运行。这与在加载上运行的代码相同吗？

当从服务器获取整个页面并加载所有图像标签或其他元素时，onload event就会触发。这肯定需要很长时间，Jquery 使用自己定义的名为 document.ready 的事件，当页面准备好处理您的脚本时触发（这将在加载文档之前发生）

这是改编自JQuery启蒙书：

window.onload native JavaScript 事件可用于 以编程方式处理网页完全加载 浏览器。但是，因为指示一切的事件具有 加载在加载所有资产（图像、Flash 等）之前不会触发， 等待此事件可能相当耗时。更好的解决方案 将在 DOM 可用时立即开始编写脚本 数据处理。jQuery 提供了一个自定义事件，该事件在 DOM 已准备好编写脚本，但在 window.onload 事件触发之前。 这是一个名为ready（）的自定义jQuery事件。有一个论点 传递给此函数，该函数是对 jQuery 函数的引用。

对于单击函数，您的更新函数在哪里？尝试在您的文档之外定义它。

相关文章：