jQuery在页面加载时触发

Question

jQuery在页面加载时触发

3

当网页加载完成后，我该如何使jQuery运行？

这并不是我想要的。这只是在等待页面完成加载之前，任何Javascript都不能运行。

$(document).ready(function(){
   //Code here
});

我希望这个程序在页面加载时就能运行，而不是等待 'click' 或 'change' 事件。我能否添加一个 'load' 或其他什么内容来实现此功能？

$(document).on("change", "#input", function(e) {
   $("#output").val($(this).val());
});

我使用的解决方法是使用jQuery来“更改”选择框上的选项，从而触发我想要运行的代码。

我看到了很多类似这样的问题，但每次答案都只是说要使用$(document).ready(function(){//Code});，这不是我想要的。

有什么想法吗？

编辑: 下面是一个更好的例子。

当id为“input”的元素被点击时，下面的代码将运行。那是它运行的唯一时间。我希望它在准备就绪时立即运行-也就是在$(document).ready(function(){});可以运行它的时候。

$(document).ready(function(){
    $(document).on("change", "#input", function(e) {
       $("#output").val($(this).val());
    });
});

我认为这个方法可以解决问题，但我希望有更好的解决方案，并且不需要将所有内容都重写为函数。

$(document).ready(function(){

    function runWhenReady(){
       $("#output").val($(#input).val());
    }

    $(document).on("change", "#input", function(e) {
      runWhenReady();    
    });

    runWhenReady();  
});

我认为这段代码在鼠标点击 #input 以及页面加载完成时会调用 runWhenReady() 方法。我的问题是，是否有更简单的方法来实现这个功能？

- blackandorangecat

定义网页加载完成，我们可能能够提供帮助。 - undefined

也许你需要更明确地表达出你所说的“加载完成”的意思。例如，ready事件是在DOM准备就绪时触发的。你想等待图片加载完成吗？ - undefined

@Hodrobond 我正在寻找类似于change的东西，我可以将其添加到.on()方法中，以便在页面加载后运行我的'function'。这个函数（上面的那个）已经被包裹在$(document).ready(function(){});中了。 - undefined

@Romulo 我修改了我的问题。 - undefined

5个回答

2

我认为实现我想要的唯一方法是给函数命名并以两种不同的方式调用它。

$(document).ready(function(){

    function xyzzy(){
       $("#output").val($(#input).val());
    }

    //Call the function when #input is clicked
    $(document).on("change", "#input", function(e) {
      xyzzy();    
    });

    //Call the function when the page loads
    xyzzy();  
});

这将在页面完成加载时调用函数，并且每当点击 #input 时也会调用。

- blackandorangecat

0

这个代码可以添加一个'load'或者其他什么东西吗？

是的，你可以使用类似于 $(window).on( "load", handler ) 的方法进行添加。

此外，上面的代码和下面的代码并没有太大的区别。

$( window).load(function() {
  // Handler for .load() called.
});

第一种方法只是第二种方法的快捷方式。

- brk

0

$(document).ready 在DOM中所有元素都存在时发生，但不一定是所有内容都存在。

$(document).ready(function() {
    alert("document is ready");
});

window.onload vs document.onload

window.onload or $(window).load()

在所有内容资源（图片等）加载完成后发生。

$(window).load(function() {
    alert("window is loaded");
});

- Vishwas Nahar

好的，那么当页面加载完成时，以及每次点击#input时，我该如何调用$("#output").val($(#input).val());呢？ - undefined

在$(document).ready(function(){}中添加以下代码：$( '#input').click( function(){ $('#output').val($(this).val()) })}，它会读取所有带有load的函数，并在需要时调用。 - undefined

0

从您的例子中：

$(document).ready(function(){

function runWhenReady(){
   $("#output").val($(#input).val());
}

$(document).on("change", "#input", function(e) {
  runWhenReady();    
});

runWhenReady();  
});

你可以这样写：

$("#input").on("change", function() {...});

它为您的输入定义了一个处理程序。每次更改输入中的值时，它都会调用作为参数传递的函数。这使得整个 $(document)... 不必要。

如果您只想运行该函数一次，尽快将其包装在 IIFE 中，如：

(function(){...});

这是一篇关于IIFE的相当不错的博客文章： http://benalman.com/news/2010/11/immediately-invoked-function-expression/

- Kris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itamar · Accepted Answer

我认为你正在寻找`$(window).load()`。

$(window).load(function(e){
    // code here
});

在评论中回答你的问题：

$(document).on('click', '#input', function(e){ 
    $('#output').val($(this).val());
});