How is it possible that the jQuery works on Chrome console, but does not itself?

I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine. Js, first part, add 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)
           });

And the second part, remove overlay:

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

My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"

Try delegating the event on the overlay by writing the following: $(document).on('click', '.overlay', function () { //The rest of your code }) ;

And same for the rest of your event handlers.

The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.