页面加载时的jQuery触发器

时间:2017-04-06 17:54:44

标签: javascript jquery

如何在我的网页加载完成后运行jQuery?

这不是我想要的。所有这一切都是在任何Javascript CAN运行之前等待页面完成加载。

$(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();  
});

我认为在点击runWhenReady()时以及页面完成加载时,这将运行#input。我的问题是,有更简单的方法吗?

5 个答案:

答案 0 :(得分:2)

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

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

在评论中回答你的问题:

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

答案 1 :(得分:0)

  

我可以添加一个'加载'或者其他什么?

是的,您可以选择$(window).on( "load", handler )

上述代码和

之间没有太大区别
$( window).load(function() {
  // Handler for .load() called.
});

第一种方法只是第二种方法的捷径

答案 2 :(得分: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");
});

答案 3 :(得分:0)

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

$(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();  
});

这将在页面加载完成后调用该函数,以及#inputclicked时。

答案 4 :(得分:0)

来自您的示例:

vmsg

你可以写:

$(document).ready(function(){

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

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

runWhenReady();  
});

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

如果你想只运行一次该功能,请尽快将其包装在IIFE中:

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

这是关于IIFE的一篇非常好的博文: http://benalman.com/news/2010/11/immediately-invoked-function-expression/