Question

我想在链接上使用悬停事件时进行叠加这部分确定，叠加创建，一切都很好但是当用户点击（或悬停）它时，我也想删除这个叠加层，这部分会产生一个奇怪的错误。
我尝试点击叠加层，它不会关闭，没有任何事情发生，但如果你将脚本粘贴到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控制台上运行，但它本身不是吗？

1 个答案: