javascript - jQuery が Chrome コンソールでは動作するが、それ自体は動作しない可能性があるのはなぜですか?

Question

リンクでホバーイベントを使用するときにオーバーレイを作成したいと思います。
この部分は問題ありません。オーバーレイが作成され、すべて問題ありません。
しかし、ユーザーがクリック (またはホバー) すると、このオーバーレイを削除したいと思います。この部分は奇妙なバグを引き起こします。
オーバーレイをクリックしようとしましたが、閉じず、何も起こりませんが、スクリプトをクロムコンソールに貼り付けると、これは正常に機能します。Js、最初の部分、スクリプトを追加:

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

2 番目の部分では、オーバーレイを削除します。

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

私のサイトでバグを見ることができます:
http://neocsatblog.mblx.hu/search/
何かを検索して、「Cimkék」までスクロールします。