1

我有以下代码获取用户当前的邮政编码并将其显示在 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吗？无论如何，单击按钮时是否可以运行此代码？我在想这样的事情会起作用，但是使用它不会产生 zipcode on document ready，或者在单击按钮时：

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

3 回答 3

3

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

不，document.ready不同于onLoad. document.ready是当 DOM 可以通过 Javascript 访问时（但不一定呈现/获取）；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); });
});
于 2012-08-17T15:24:48.073 回答
2

将您的代码放在它自己的函数中，并在加载时调用该函数。然后有你的 button 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);
                    });
                }
            );
        });
    }
}
于 2012-08-17T15:30:14.483 回答
1

我相信，代码在准备好的文档上运行。这与运行 onLoad 的代码相同吗？

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

这是改编自 JQuery Enlightenment book ：

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

而对于点击功能，你的更新功能在哪里？尝试在您的 document.ready 之外定义它。

于 2012-08-17T15:22:57.707 回答