0

tengo un sistema de video-cursado en el cual utilizo la API de youtube como se muestra aquí para cargar los videos:

https://developers.google.com/youtube/iframe_api_reference?hl=es-419#Getting_Started

Las clases las cargo asincronicamente con ajax, de esta manera:

jQuery.ajax({
                type: "GET",   
                url: cursado.php,
                data: 
                    {                               
                        id_curso: id_curso
                    },
                cache: false,
                success : function(data){
                            // Cargo contenido
                            jQuery("#contenido").html(data);
                        },                      
                });

Cuando finaliza la clase llamo de nuevo a la función para que cargue la siguiente clase.

El asunto es que la primera vez que llamo a la función que carga el vídeo, se carga correctamente, pero cuando la llamo las siguientes veces, no se ejecutan los eventos de la API.

Subo un ejemplo para que puedan probar:

index.html

<!DOCTYPE html>
<html>
<head>
<script
              src="https://code.jquery.com/jquery-3.2.1.min.js"
              integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
              crossorigin="anonymous"></script>
</head>
<body>
    <div id="contenedor">
    </div>
     <input id="boton" type="button" value="Ajax"> 
    <script>
        jQuery("body").on("click","#boton",function(){
            jQuery.ajax({
                            type: "GET",   
                            url: "api_youtube.html",                    

                            cache: false,
                            beforeSend: function() {                                        
                                    },
                            success : function(data){
                                        jQuery("#contenedor").html(data);                                   
                                    },
                            error: function(){
                                    },
                            complete: function(){                                   
                                    }
                            });
        })
    </script>
</body>
</html>

api_youtube.html

<iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>    
    <script>
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player( 'player', {
          events: { 'onReady': onPlayerReady }
        });
      }
      function onPlayerReady(event) {
        alert("hola");        
      }

    </script>
    <script src="https://www.youtube.com/iframe_api"></script>

Como podrán ver la primera vez que hacen click en el boton ajax sale un alert "Hola" pero las siguientes veces ya no.

1 respuesta 1

1

El boton no trabaja debido a que inyectas nuevo codigo html cuando realizas la primer petición, te recomiendo que estudies un poco sobre el DOM.

Pero para que te funcione, el botón búscalo sobre todo el documento.

$(document).on("click","#test-element",function() {
        alert("alerta");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="test-element">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.