Puede tener varios $ (documento) .ready (función() {...}); secciones?

Question

Si tengo una gran cantidad de funciones en el arranque de lo que todos tienen que estar bajo una sola:

$(document).ready(function() { 

o puedo tener múltiples tales declaraciones?

Answer 1

Puede tener varias, pero no siempre es lo más recomendable. Trate de no abusar de ellos, ya que afectará seriamente la legibilidad. Aparte de eso, es perfectamente legal. Ver el siguiente:

http://www.learningjquery.com/2006/09/multiple-document-ready

Trate de hacer esto:

$(document).ready(function() { 
    alert('Hello Tom!'); 
}); 

$(document).ready(function() { 
    alert('Hello Jeff!'); 
}); 

$(document).ready(function() { 
    alert('Hello Dexter!'); 
}); 

Usted encontrará que es equivalente a esto, tenga en cuenta el orden de ejecución:

$(document).ready(function() { 
    alert('Hello Tom!'); 
    alert('Hello Jeff!'); 
    alert('Hello Dexter!'); 
}); 

También vale la pena teniendo en cuenta que una función definida dentro de un bloque $(document).ready no se puede llamar desde otro bloque $(document).ready, acabo de ejecutar esta prueba:

$(document).ready(function() { 
    alert('hello1'); 
    function saySomething() { 
     alert('something'); 
    } 
    saySomething(); 

}); 
$(document).ready(function() { 
    alert('hello2'); 
    saySomething(); 
}); 

producción fue:

hello1 
something 
hello2 

Answer 2

Sí que es posible tener múltiples $ ready (documento)() llama. Sin embargo, no creo que puedas saber de qué manera serán ejecutados. (source)

Answer 3

Sí, puede tener varios bloques fácilmente. Solo tenga cuidado con las dependencias entre ellos ya que el orden de evaluación puede no ser el esperado.

Answer 4

Puede usar múltiples. Pero también puede usar múltiples funciones dentro de un documento. También está listo:

$(document).ready(function() { 
    // Jquery 
    $('.hide').hide(); 
    $('.test').each(function() { 
     $(this).fadeIn(); 
    }); 

    // Reqular JS 
    function test(word) { 
     alert(word); 
    } 
    test('hello!'); 
}); 

Answer 5

Sí, puede.

Las secciones preparadas para múltiples documentos son particularmente útiles si tiene otros módulos activados en la misma página que lo utilizan. Con la antigua declaración window.onload=func, cada vez que especificaba una función para ser llamada, reemplazaba la antigua.

Ahora todas las funciones especificadas se ponen en cola/apilado (pueden confirmar a alguien?), Independientemente de la sección de documentar lista que se especifican en.

Answer 6

Sí, es posible, pero se puede usar mejor un #mydiv div y usar ambas

$(document).ready(function(){}); 

//and 

$("#mydiv").ready(function(){}); 

Answer 7

Sí, está perfectamente bien, pero evite hacerlo sin una razón. Por ejemplo, lo utilicé para declarar las reglas del sitio global por separado de las páginas individuales cuando mis archivos javascript se generaron dinámicamente, pero si sigues haciéndolo una y otra vez, será difícil de leer.

También no puede acceder a algunos métodos desde otra llamada jQuery(function(){}); por lo que es otra razón por la que no quiere hacer eso.

Con la antigua window.onload, aunque reemplazará la anterior cada vez que especificó una función.

Answer 8

Creo que la mejor manera de hacerlo es poner el interruptor en las funciones con nombre (Check this overflow for more on that subject). De esa manera puede llamarlos desde un único evento.

así:

function firstFunction() { 
    console.log("first"); 
} 

function secondFunction() { 
    console.log("second"); 
} 


function thirdFunction() { 
    console.log("third"); 
} 

De esta manera, es posible colocarlos en una sola función listo.

jQuery(document).on('ready', function(){ 
    firstFunction(); 
    secondFunction(); 
    thirdFunction(); 

});

de salida Esta voluntad lo siguiente a su console.log:

first 
second 
third 

esta manera se puede volver a utilizar las funciones para otros eventos.

jQuery(window).on('resize',function(){ 
    secondFunction(); 
}); 

Check this fiddle for working version

Answer 9

Es legal, pero a veces se produce un comportamiento no deseado. Como ejemplo, utilicé la biblioteca MagicSuggest y agregué dos entradas MagicSuggest en una página de mi proyecto y utilicé funciones de preparación de documentos separadas para cada inicialización de las entradas. La primera inicialización de Entrada funcionó, pero no la segunda, y tampoco dio ningún error. La Segunda Entrada no apareció. Por lo tanto, siempre recomiendo usar una función de Document Ready.

Answer 10

Incluso puede anidar funciones preparadas para documentos dentro de los archivos html incluidos. Aquí hay un ejemplo usando jQuery:

del archivo: test_main.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="jquery-1.10.2.min.js"></script> 
</head> 

<body> 
    <div id="main-container"> 
     <h1>test_main.html</h1> 
    </div> 

<script> 
    $(document).ready(function() 
    { 
     console.log('test_main.html READY'); 
     $("#main-container").load("test_embed.html"); 
    }); 
</script> 

</body> 
</html> 

del archivo: test_embed.html

salida

<h1>test_embed.html</h1> 
<script> 
    $(document).ready(function() 
    { 
     console.log('test_embed.html READY'); 
    }); 
</script> 

Consola:

test_main.html READY      test_main.html:15 
test_embed.html READY      (program):4 

navegador muestra:

test_embed.html

Answer 11

También puede hacerlo de la siguiente manera:

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#hide").click(function(){ 
    $("#test").hide(); 
    }); 
    $("#show").click(function(){ 
    $("#test").show(); 
    }); 
}); 
</script> 
</head> 

<body> 
<h2>This is a test of jQuery!</h2> 
<p id="test">This is a hidden paragraph.</p> 
<button id="hide">Click me to hide</button> 
<button id="show">Click me to show</button> 
</body>