jquery - w3schools - ¿El contenido cargado AJAX obtiene un "document.ready"?

jquery ready vs load

Question

Ayer tuve un problema donde un controlador de eventos .on(''click'') que estaba asignando no funcionaba correctamente. Resulta que es porque estaba tratando de aplicar ese .on(''click'') antes de que ese elemento existiera en el DOM, porque se estaba cargando a través de AJAX, y por lo tanto no existía cuando document.ready() llegó a ese punto.

Lo resolví con una solución incómoda, pero mi pregunta es, si tuviera que poner una etiqueta <script> EN el contenido cargado de ajax y otro document.ready() dentro de eso, ese segundo document.ready() sería analizado SOLAMENTE una vez que el contenido de AJAX está listo para ser cargado? En otras palabras, ¿considera que el contenido ajax cargado por separado es otro document , y si es así, tener otro document.ready() dentro de ese HTML cargado con Ajax funciona de la manera que creo?

Alternativamente; ¿Cuál sería una mejor manera de manejar esta situación? (necesidad de adjuntar un detector de eventos a un elemento DOM que aún no existe en document.ready() )

Answer 1

Estoy trabajando en una base de código con un amigo que tiene un requisito similar. La opción de controlador de eventos delegados es definitivamente mejor si todo lo que desea es adjuntar manejadores de eventos. Una alternativa, especialmente si necesita hacer otro procesamiento DOM en su función $(document).ready , es colocar el código que desea ejecutar en un elemento script al final de su código. Básicamente, en lugar de:

<script type="text/javascript">
  $(document).ready(function() {
    // Your code here
  });
</script>
<!-- rest of dynamically loaded HTML -->

Intente intercambiar el script y el resto del código HTML para tener:

<!-- rest of dynamically loaded HTML -->
<script type="text/javascript">
  // Your code here
</script>

Esto obliga al navegador a procesar su código una vez que haya cargado todos los demás elementos DOM en el HTML cargado dinámicamente. Por supuesto, esto significa que tendrás que asegurarte de que el HTML insertado no tenga consecuencias de IU involuntarias al usar CSS / HTML en lugar de JS. Es un viejo truco de JavaScript de años pasados. Como beneficio adicional, ya no necesitas jQuery para esto.

Debo mencionar que en Chromium v34, poner una segunda llamada $(document).ready dentro de una etiqueta <script> en el HTML cargado dinámicamente parece esperar que se cargue DOM cargado dinámicamente y luego ejecuta la función como describió. No estoy seguro de que este comportamiento sea estándar, ya que me ha causado un gran dolor al intentar automatizar las pruebas con este tipo de código.

Answer 2

JQuery AJAX .load () tiene una característica incorporada para manejar esto. En lugar de simplemente $(''div#content'').load(''such_a_such.url''); deberías incluir una función de devolución de llamada. JQuery .load () proporciona espacio para lo siguiente:

$(''div#content'').load(''such_a_such.url'',
    { data1: "First Data Parameter",
      data2: 2,
      data3: "etc" },
    function(){ $(''#span1'').text("This function is the equivalent of");
                $(''#span2'').text("the $(document).ready function.");
    }
 );

Sin embargo, no es necesario que incluya el argumento de datos.

$ ("#result") .load ("ajax / test.html", function () {alerta ("Se realizó la carga.");});

http://api.jquery.com/load/

Answer 3

Javascript en la llamada ajax resultante no se ejecutará (por defecto) debido a la seguridad. Además, no puede vincular directamente el evento a elementos no existentes.
Puede vincular un evento a algún padre que sí exista, y decirle que verifique sus hijos:

$(document).ready(function(){
    $(document).on(''eventName'', ''#nonExistingElement'', function(){ alert(1); }
    // or:
    $(''#existingParent'').on(''eventName'', ''#nonExistingElement'', function(){ alert(1); }
});

Siempre trate de acercarse lo más posible al elemento desencadenante, esto evitará burbujeos involuntarios a través del DOM

Si tiene algunas funciones raras, podría hacer algo como esto:

function bindAllDocReadyThings(){
    $(''#nonExistingElement'').off().on(''eventName'', function(){ alert(1); }
    // Note the .off() this time, it removes all other events to set them again
}
$(document).ready(function(){
    bindAllDocReadyThings();
});
$.ajaxComplete(function(){
    bindAllDocReadyThings();
});

Answer 4

La respuesta aquí es un evento delegado:

JSFiddle

JSFiddle - Verdaderamente dinámico

jQuery

$(document).ready(function(){
    // Listen for a button within .container to get clicked because .container is not dynamic
    $(''.container'').on(''click'', ''input[type="button"]'', function(){
        alert($(this).val());
    });

    // we bound the click listener to .container child elements so any buttons inside of it get noticed
    $(''.container'').append(''<input type="button" class="dynamically_added" value="button2">'');
    $(''.container'').append(''<input type="button" class="dynamically_added" value="button3">'');
    $(''.container'').append(''<input type="button" class="dynamically_added" value="button4">'');
    $(''.container'').append(''<input type="button" class="dynamically_added" value="button5">'');
});

HTML

<div class="container">
    <input type="button" class="dynamically_added" value="button1">
</div>

Answer 5

Para responder a su pregunta: No, document.ready no volverá a activarse una vez que se complete una solicitud de ajax. (El contenido en el ajax se carga en su documento, por lo que no hay un segundo documento para el contenido de ajax).

Para resolver su problema simplemente agregue el detector de eventos al Elemento donde carga el contenido de Ajax. Por ejemplo:

$( "div.ajaxcontent-container" ).on( "click", "#id-of-the-element-in-the-ajax-content", function() {
  console.log($( this ));
});

Para #id-of-the-element-in-the-ajax-content , puede usar cualquier selector que use en $("selector") . La única diferencia es que solo se seleccionarán elementos bajo div.ajaxcontent-container .

Cómo funciona: Siempre que div.ajaxcontent-container exista todos los elementos (si existen ahora o solo en el futuro) que coincidan con el selector #id-of-the-element-in-the-ajax-content activará este clic. -evento.

Answer 6

intenta esto, eso no funciona porque tu control aún no está creado y estás tratando de adjuntar un evento, si lo usas en caso de que funcione bien. avísame si enfrentas algún problema.

$(document).ready(function(){
    $(document).on(''click'', ''#element'', function (evt) {
        alert($(this).val());
    });
});