La fonction n'est pas d'appeler dans un événement onclick

Je veux ajouter un peu de HTML à la fin de chaque lien youtube pour ouvrir le lecteur dans une litebox. C'est mon code pour l'instant:

$(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);
  }
});

Il fonctionne au point où il injecte un peu de HTML après le lien youtube, comme suit:

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

Mais quand je clique sur ce le open_litebox() fonction n'est pas appelée. En regardant dans la console d'erreur, je peux voir une erreur qui dit que open_litebox is not defined, mais je l'ai défini.

Je suis assez désemparés quant à ce qui va mal ici, quelqu'un pourrait-il me prêter un coup de main?

Grâce.

InformationsquelleAutor Wen | 2010-11-22
  1. 47

    C'est un problème courant lorsque vous commencez à travailler avec jQuery. Le problème ici est que vous avez défini la fonction au sein de l'jQuery portée, ce qui signifie qu'il n'est pas accessible par tout le qualifiant comme une fonction normale. Une solution à votre problème est de déplacer votre définition de la fonction à l'extérieur de l'anonyme prêt de la fonction que vous avez écrit, comme suit:

    $(document).ready(function() {

    //do your stuff here

});

//define your functions here 
function my_func() {

}

    Oh, et je suggère de faire de même pour les variables que vous avez défini. Déplacer en dehors de votre prêt de la fonction en tant que bien, parce que vous aurez les mêmes problèmes que vous avez avec vos fonctions.

    • Beaucoup mieux pas, la fonction globale, et de le brancher avec moderne gestion des événements, pas onxyz-attribut gestionnaires.
    InformationsquelleAutor Simon H
  2. 10

    Votre open_litebox fonction est dans le cadre d'une autre fonction, de sorte qu'il n'est pas visible au niveau mondial. Au lieu de ce que vous faites, essayez d'utiliser .click():

    Quelque chose le long de ces lignes:

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

    Vous devez générer séparer les Id pour chacun des liens à l'aide de cette manière, donc, une autre façon est de faire de chacun de <img> balises ont connu class attribut, puis sélectionnez à l'aide de $('.abc') (si la classe est abc) au lieu de $('#abc') et de le faire en une seule étape (c'est à dire comme un appel séparé après votre $('a').each).

    InformationsquelleAutor icyrock.com
  3. 10

    Les autres réponses sont correctes, en ce que le déplacement de votre my_func déclaration à l'extérieur de $(document).ready() permettra de résoudre votre problème, mais je tiens à clarifier le raisonnement, parce qu'il n'a rien à voir avec jQuery en particulier.

    $(document).ready() est un gestionnaire d'événement pour lequel vous êtes en train de passer une fonction anonyme comme un rappel qui doit s'exécuter lorsque le navigateur vous informe que le document est prêt.

    Parce que vous avez définies my_func dans la fonction de rappel, il n'est pas visible à partir de la portée mondiale et ne peut donc pas être appelé à partir de la onclick propriété de votre page img élément.

    En JavaScript, la portée est au niveau de la fonction. Tout ce qui n'est pas à l'intérieur d'une fonction est agglomérée dans la portée globale.

    InformationsquelleAutor Rob Sobers
  4. 2

    La raison en est que open_litebox() est déclaré à l'intérieur de la document.ready la fonction, et donc pas accessible à partir d'une portée mondiale.

    Vous pouvez déplacer la fonction à l'extérieur de document.ready, ou, modifier le code pour fixer le onclick gestionnaire à l'aide de jQuery (qui fait référence à la fonction directement):

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

    Il y a un bien plus propres et plus jQuery pour affecter l'action du clic.

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

    Ce qui résout le problème de la portée, comme décrit dans les autres réponses. Si vous avez besoin d'appeler open_litebox() avec des paramètres, l'envelopper à l'intérieur d'une fonction anonyme comme je l'ai fait, ou bien la fonction sera appelée, et ensuite la valeur de retour est passé à l'action du clic. Sinon, pas de paramètres à passer, la mission est simple:

    $(this).click( open_litebox );
    InformationsquelleAutor Surreal Dreams