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

Posted 2023-02-23

【中文标题】附加 jQuery 代码以运行 onLoad 并单击按钮？

【英文标题】：Attach jQuery code to run onLoad and on button click?

【发布时间】：2012-08-17 15:17:02

【问题描述】：

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

【参考方案1】：

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

不，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); );
);

【讨论】：

这是测试按钮是否再次调用原始脚本的任何方法吗？我猜我可以将结果记录到控制台？

除非您以某种方式削弱了 update 函数引用（或者从您设置 click 处理程序的位置看不到它），否则您应该调用原始函数。如有疑问，您可以随时尝试拨打console.log() 电话或其中的其他内容。

【参考方案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);
                    );
                
            );
        );
    

【参考方案3】：

我相信，代码在文档准备就绪时运行。这和onLoad运行的代码一样吗？

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

这是改编自JQuery启蒙书：

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

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