Comment est-il possible que jQuery fonctionne sur la console Chrome, mais pas lui-même?

Question

Je voudrais faire une superposition lorsque les utilisations font un événement hover sur un lien.
Cette partie ok, la superposition créée et tout va bien.
Mais je voudrais également supprimer cette superposition, lorsque l'utilisateur clique (ou passe la souris) pour cela, et cette partie crée un bug étrange.
J'essaie de cliquer pour la superposition et sa fermeture ne se ferme pas, rien ne se passe, mais si vous collez un script sur la console chromée, cela fonctionne très bien. Js, première partie, ajouter un script:

var overlay = jQuery('<div class="overlay"> </div>'); 
     $("#link-'.$myqlVideoID.'").hover(function() { 
       $("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1"); 
       $(".drop-target").css("background-color","#070707"); 
       $(".drop-target").css("padding","11px"); 
       $(".drop-target").css("margin-bottom","16px"); 
       $(".drop-target").show().fadeIn("3000"); 
        overlay.appendTo(document.body) 
      }); 

Et la deuxième partie, retirez overlay:

$(document).ready(function() { 
    $(".overlay").click(function() { 
     $("#hover-").removeAttr("src"); 
     $(".drop-target").hide().fadeOut("3000"); 
     $(".overlay").remove(); 
     console.log("clicked"); 
    }); 
    }); 

Mon site est l'endroit où vous pouvez voir le bug:
http://neocsatblog.mblx.hu/search/
recherche Juste quelque chose et faites défiler jusqu'à "Cimkék"

Answer 1

Essayez de déléguer l'événement sur la superposition en écrivant ce qui suit: $(document).on('click', '.overlay', function() { //The rest of your code }) ;

Et même pour le reste de vos gestionnaires d'événements.

La raison en est que l'élément overlay est ajouté dynamiquement, et le script ne le sait pas au moment où il est instancié.