Quiero añadir algo de código HTML al final de cada enlace de youtube para abrir el reproductor en un litebox. Este es mi código hasta el momento:

$(document).ready(function() {
  var valid_url = new RegExp('youtube\.com\/.*v=([a-zA-Z0-9_-]+)');
  var image_data = 'base64 encoded image';

  init();

  function init() {
    $('a').each(function() {
      if (valid_url.test($(this).attr('href'))) {
        $(this).after( ' <img src="' + image_data + '" onclick="open_litebox(\'hi\');" />' );
      }
    });
  }

  function open_litebox(param) {
    alert(param);
  }
});

Funciona hasta el punto donde se inyecta algo de HTML después de que el enlace de youtube, así:

<img src="base 64 data" onclick="open_litebox('hi')">

Pero cuando hago clic en este el open_litebox() función no consigue llamado. Buscando en el error de la consola puedo ver un error que dice open_litebox is not defined, pero me la han definido.

Estoy bastante despistado en cuanto a lo que va mal aquí, alguien podría prestarme una mano?

Gracias.

InformationsquelleAutor Wen | 2010-11-22

5 Comentarios

  1. 47

    Este es un problema común cuando comienza a trabajar con jQuery. El problema aquí es que usted ha definido la función dentro de la jQuery ámbito, lo que significa que no es accesible con sólo llamar como una función normal. Una solución a su problema es mover la definición de la función fuera de los anónimos listo función que usted escrita, así:

    $(document).ready(function() {
    
        //do your stuff here
    
    });
    
    //define your functions here 
    function my_func() {
    
    }

    Ah, y sugeriría que hicieran lo mismo para las variables que se han definido. Moverlos fuera de su función ready así, ya que tendrá los mismos problemas, como lo hizo con sus funciones.

    • Mucho mejor no la función global, y para conectar con moderna gestión de eventos, no onxyzatributo de los controladores.
  2. 10

    Su open_litebox función es en el ámbito de otra función, por lo que no es visible a nivel mundial. En lugar de lo que están haciendo, trate de usar .click():

    Algo a lo largo de estas líneas:

    $(this).after( ' <img src="' + image_data + '" id='abc' />' );
    $('#abc').click(open_litebox);

    Usted tendría que generar aparte de los Identificadores de cada uno de los enlaces utilizando de esta manera, por lo tanto, otra forma es hacer que cada uno de <img> etiquetas tienen un conocido class atributo y, a continuación, seleccione utilizando $('.abc') (si la clase es abc) en lugar de $('#abc') y hacerlo en un solo paso (es decir, como una llamada independiente después de su $('a').each).

  3. 10

    Las otras respuestas son correctas en que la mudanza de su my_func declaración fuera de $(document).ready() va a resolver tu problema, pero me gustaría aclarar el razonamiento, porque no tiene nada que ver con jQuery en particular.

    $(document).ready() es un controlador de eventos a los que estás pasando una función anónima como una devolución de llamada que se debe ejecutar cuando el navegador le avise de que el documento está listo.

    Debido a que usted ha definido my_func dentro de la función de devolución de llamada, que no es visible desde el ámbito global y por lo tanto no puede ser llamado desde el onclick propiedad de su página img elemento.

    En JavaScript, el ámbito de aplicación es en el nivel de función. Todo aquello que no está dentro de una función se presenta agrupada en el ámbito global.

  4. 2

    La razón es que open_litebox() se declara dentro de la document.ready función, y por lo tanto no se puede acceder desde un ámbito global.

    Puede mover la función fuera de document.ready, o bien, modificar el código para conectar el onclick usando jQuery (que hace referencia a la función directamente):

    var link = $(' <img src="' + image_data + '" />' ).click(function () {
       open_litebox('hi');
    });
    $(this).after(link);
  5. 0

    Hay mucho más limpio y más de jQuery con forma de asignar la acción de clic.

    function init() {
        $('a').each(function() {
            if(valid_url.test($(this).attr('href'))){
                $(this).click( function() { open_litebox('hi'); });
            }
        });
    }

    Esto resuelve el alcance del problema como se describe en las otras respuestas. Si necesita llamar a open_litebox() con los parámetros, se envuelve dentro de una función anónima como yo lo hice, o de lo contrario la función será llamada y, a continuación, el valor de retorno se pasa a la acción de clic. De lo contrario, sin parámetros a pasar, la tarea es más sencilla:

    $(this).click( open_litebox );

Dejar respuesta

Please enter your comment!
Please enter your name here