aplazar la ejecución de JavaScript en el documento recibido a través de AJAX

Recibo este documento HTML a través de AJAX:

    <form enctype="multipart/form-data" method="POST" action="admin.php?do=media&action=file-upload">

    <div id="uploadForm">

        <div id="fileList">



        </div>

        <a href="#" id="selectFile">[Select File]</a>
        <a href="#" id="uploadFile">[Start Upload]</a>

    </div>

</form>

<script type="text/javascript">
    // $(function(){}); not working when data loaded with ajax request
        var ajaxUpload = new plupload.Uploader({

            runtimes: 'gears, html5, flash',
            url: 'upload.php',
            browse_button: 'selectFile',

        });


        ajaxUpload.bind('Init',function(param){
            console.log(param);
            console.log($('selectFile'));
        });

        $('#uploadFile').click(function(){
            alert('Something');
        });

        ajaxUpload.init();


</script>

Cuando agrego esto al documento principal, el JavaScript que contiene se ejecutará inmediatamente y no podrá encontrar los elementos DOM a los que se hace referencia.

Funciona cuando agrego un tiempo de espera en el código, pero me gustaría saber una mejor manera de lograrlo.

Noticias

Modificado para reflejar la verdadera intención de la pregunta.

preguntado el 22 de mayo de 12 a las 07:05

-1 por falta de investigación básica - este es el en el primer cosa que cualquiera encuentra en cualquier tutorial de jQuery -

@Alnitak, sé que puedes hacer eso con $(function(){}); pero si ves, digo en la solicitud de ajax, y podemos usar $(function(){});, lo intento pero no funcionó... -

@MR.OK: creo que esta podría ser la parte con la que la gente está luchando: when i load content directly, it work, but when i load it with an ajax request, javascript code will execute but dom elements not ready yet,. ¿Crees que puedes editar tu pregunta nuevamente y aclarar lo que quieres decir con esto? Gracias. -

3 Respuestas

Esto no es posible de la manera que ha descrito, porque JavaScript no está sujeto a una condición para ejecutarse, por lo que se ejecuta de inmediato.

El código dentro del documento que está recibiendo a través de AJAX debe incluirse dentro de una función al proporcionar un lado:

function onDocumentReady()
{
    // your code here
}

Luego desde el código de carga:

// get the HTML and JavaScript in data
$('#container').append($(data));
// fire the function to let JavaScript run
onDocumentReady();

Si tiene varias solicitudes, la parte proveedora debe hacer la onDocumentReady función única agregando alfabetos aleatorios al nombre de la función, por ejemplo onDocumentReady_123()

contestado el 22 de mayo de 12 a las 09:05

Gracias Alnitak por detectar el error tipográfico :) - Jack

¿Qué? digo en la solicitud de ajax, no podemos usar document.ready en ajax ... lea el tema - Hadi Mostafapour

@MR.OK bueno, todos estábamos luchando por entender la pregunta... actualicé mi respuesta, creo que sé lo que querías. - Jack

Envuelve tu código dentro de un $(documento). Listo. Esto asegurará que su JavaScript no se ejecute hasta que se cargue el DOM y los elementos a los que se dirige estarán disponibles en la página:

$(document).ready(function() {
   var ajaxUpload = new plupload.Uploader({

        runtimes: 'gears, html5, flash',
        url: 'upload.php',
        browse_button: 'selectFile',

    });


    ajaxUpload.bind('Init',function(param){
        console.log(param);
        console.log($('selectFile'));
    });

    $('#uploadFile').click(function(){
        alert('Something');
    });

    ajaxUpload.init();
});

Para obtener más información sobre cómo funciona esto, consulte la documentación de jQuery listo. El sitio también tiene información sobre otros comandos útiles de jQuery que pueden ser útiles, y lo animo a que lo revise y pruebe los ejemplos que se encuentran allí. ¡Buena suerte!

ACTUALIZACIÓN:

Si entiendo correctamente, obtienes algo como este HTML del servidor:

<!-- Pulled HTML from the server using AJAX -->
<div id="uploadForm">
    <div id="fileList">
    </div>
    <a href="#" id="selectFile">[Select File]</a>
    <a href="#" id="uploadFile">[Start Upload]</a>
</div>

Y tal vez tratando de inyectarlo dinámicamente en esto:

<form action=""> <!-- inject HTML here --> </form>

Si mi comprensión es correcta, esto debería permitirle inyectar el HTML y luego solo ejecutar JavaScript una vez que se complete la solicitud de AJAX y se haya inyectado el nuevo DOM. Tenga en cuenta que, dado que no tengo todo su código, este es solo un ejemplo conceptual:

$.ajax({ url:"/somepathtoGetData",
    success: function(data) {

        // your HTML is in the variable "data", and this injects the HTML into
          // the form element on the page
        $('form').html( data );

        // now that the DOM elements are loaded from the AJAX request, do your
         // other stuff with the uploader here

        var ajaxUpload = new plupload.Uploader({

            runtimes: 'gears, html5, flash',
            url: 'upload.php',
            browse_button: 'selectFile',

        });


        ajaxUpload.bind('Init',function(param){
            console.log(param);
            console.log($('#selectFile')); // added # for id attr
        });

        $('#uploadFile').click(function(){
            alert('Something');
        });

        ajaxUpload.init();

    }
});

contestado el 22 de mayo de 12 a las 08:05

@ MR.OK - Lo siento, esto no funcionó para usted. Si no obtiene las respuestas que esperaba, considere publicar el resultado del depurador en su pregunta, los mensajes de error que recibe. También puede publicar versiones reducidas del código para resaltar dónde cree que podría estar el problema. Además, si dice en su pregunta lo que tienen probado, entonces la gente no te sugerirá cosas que ya conoces. ¡Buena suerte! - jmort253

mi problema es claro, quiero agregar algo de html y javascript a mi documento con una solicitud de ajax, pero primero mi javascript llamó y luego html agregó al documento: Hadi Mostafapour

¿Está tratando de permitir que sus usuarios carguen un archivo? ¿O está tratando de obtener HTML del servidor y cargar ese HTML en su página? Además, verifique la declaración de su consola: creo que le falta un #: console.log($('#selectFile')); - jmort253

mi problema no es con las cargas ..., cuando HTML y JavaScript se agregaron al documento, primero se ejecutó JavaScript, en este momento mi html no está accesible, puedo usar tiempos de espera y funciona, pero quiero encontrar una forma correcta: Hadi Mostafapour

Si puede mostrarme lo que estaba haciendo con los tiempos de espera, podría ofrecerle una sugerencia, pero tendría que ver el código para comprenderlo completamente. Podría poner eso en el cuerpo de su pregunta en la parte inferior. Si entiendo, desea evitar los tiempos de espera (lo cual es bueno evitar) pero no está seguro de cuál es un buen reemplazo para los tiempos de espera. - jmort253

ACTUALIZACIÓN

Digamos que tengo dos archivos php, uno es main.php, que tiene tales códigos: (sin incluir jQuery src, agregue el suyo propio)

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){
        $('#b').click(function(){
            $.post("ajax.php",
            {
                taskaction: "getFormAndJs"              
            },
            function(data){
                        $('body').append(data);
                        // $(document).trigger("ready");
            },
            "text");
            })
    });
</script>

<body>
    aaaaaaaaaaaaa
    <input type=button id="b" value="click" />
</body>

otro es ajax.php, así:

<?php

if ($_POST['taskaction'] == 'getFormAndJs') {
    echo '
        <div id="uploadForm">222</div> <input type=button id="a" value="upload" />
        <script>
        $("#a").click(function(){
            alert(123);
        })
        </script>
    ';
}

?>

Parece funcionar de mi parte (haga clic en el botón a y alerta "123"), ya sea que agregue el

$(document).trigger("ready");

o no.

¿Se parece a su situación?

contestado el 22 de mayo de 12 a las 09:05

¿Quiere decir que agrega este formulario y js al documento mediante una llamada ajax? - Jinzhao Huo

exactamente, quiero agregarlos a todos con una solicitud ajax, y javascript llamado después de html agregado - Hadi Mostafapour

prueba $(documento).trigger("listo"); al final de su llamada ajax - Jinzhao Huo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.