Question

我有以下代码获取用户当前的邮政编码并在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();});

Answer 1

此问题不会在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); });
});

Answer 2

将代码放在自己的函数中，并在加载时调用该函数。然后按下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);
                    });
                }
            );
        });
    }
}

Answer 3

我相信代码会在文档准备就绪时运行。这与运行onLoad的代码相同吗？

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

这改编自JQuery Enlightenment一书：

可以使用window.onload本机JavaScript事件以编程方式处理网页已完全加载的时间浏览器。但是，因为事件表明一切都有在加载所有资源（图像，Flash等）之前，加载不会触发，等待这个事件可能相当耗时。更好的解决方案将尽可能快地开始编写DOM脚本操纵。 jQuery提供了一个在之后执行的自定义事件 DOM已准备好编写脚本，但在window.onload事件触发之前。这是一个名为ready（）的自定义jQuery事件。有一个论点传递给这个函数，它是对jQuery函数的引用。

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

附加jQuery代码以运行onLoad并单击按钮？

3 个答案: