jQuery 怎么可能在 Chrome 控制台上工作，但它本身却不工作？

Question

当用户在 link 上进行悬停事件时，我想制作一个叠加层。
这部分没问题，叠加层已创建，一切正常。
但我也想删除这个叠加层，当用户点击（或悬停）它时，这部分会产生一个奇怪的错误。
我尝试单击叠加层，但它没有关闭，没有任何反应，但是如果您将脚本粘贴到 chrome 控制台，则可以正常工作。 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)
           });

第二部分，删除覆盖：

$(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"

Answer 1

尝试通过编写以下内容在叠加层上委派事件： $(document).on('click', '.overlay', function () { //The rest of your code }) ;

其余的事件处理程序也是如此。

原因是元素 overlay 是动态添加的，脚本在实例化时不知道它。

jQuery 怎么可能在 Chrome 控制台上工作，但它本身却不工作？

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

javascript

jquery

overlay

overlays