Question

我似乎有这个问题，但我不确定它是什么我有一个包含链接列表的库，每个链接都带有一堆div元素与Jquery load()方法异步。

HTML

      ...

     <section class="categories">
      <ul class="categoryList">
       <li class="selected HTML"> HTML & CSS </li>
       <li class="Javascript"> Javascript </li>
       <li class="JQuery"> JQuery </li>
       <li class="APIs"> APIs </li>
      </ul>
     </section><!--categories-->

  </div><!--leftColumn-->

  <div class="mainSection">
    <div class="wrapper">
    <h1 id="mainSectionTitle"> HTML & CSS </h1>
      <hr class="hr">


      <div class="gallery">
     <!-- Items are inserted here -->  

       </div><!--gallery-->
      </div><!--wrapper-->
     </div><!--mainSection-->

  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="script.js"></script>

</body>

Jquery的

$(".gallery").load("HTML-CSS.html");


  $(".categoryList li").click(function(){
    var text = $(this).text();
    $("#mainSectionTitle").addClass("animate-inLeft");
    $(this).siblings().removeClass("selected");
    $(this).addClass("selected");
     $(".wrapper h1").text(text);
    setTimeout(timeOut, 700);
   });


 function timeOut(){
  $("#mainSectionTitle").removeClass("animate-inLeft")
 }

$(".thumb").mouseenter(function(){
   $(".opacityParagraph").addClass("opacityParagraphVisible")
    $(this).css("opacity", "0.1");
 })

    $(".thumb").mouseleave(function(){
    $(this).css("opacity", "1");
$(".opacityParagraph").removeClass("opacityParagraphVisible")
  })


$(".Javascript").click(function(){

    $(".gallery").load("Javascript.html");

});

这就是“Javascript.html”中的内容，即被调用的元素：

<div class="opacityLayer">  
     <p class="opacityParagraph">   </p>
   <div class="thumb"> <a href="..."> <img src="ProjectImages/HTML-CSS/flexbox-gallery.JPG"></a><p></p></div></div>

 <script type="text/javascript" src="script.js"></script>

为了让鼠标输入和鼠标离开方法起作用，我不得不在我调用的每个HTML部分的末尾添加一个标记，这会产生一些错误。几次通话后或按下按钮太快，元素开始消失等等。

有更好的解决方案吗？

Answer 1

尝试使用此

 $('.gallery').on('mouseenter','.thumb',function(){
    $(".opacityParagraph").addClass("opacityParagraphVisible")
    $(this).css("opacity", "0.1");
 })

并在mouseleave上执行相同操作

我假设它，因为你要添加的对象是dom树的新对象所以当你直接引用.thum时它的未知。使用on并对已经存在的父对象进行处理通常可以解决问题。

Answer 2

何塞说得对...但他没有向你解释任何事情。

定义时：

$('.thumb').on('mouseenter', ...

您正在搜索当前位于DOM树中的thumb类的所有元素，因此您可以将事件侦听器附加到每个元素（您可以附加与thumb元素一样多的侦听器）

当你这样做时：

$('.gallery').on('mouseenter','.thumb', ...

这意味着您正在搜索具有gallery类的所有元素（我假设只有一个这样的元素），并将事件侦听器附加到它（单个事件侦听器）。当您在具有gallery类的任何thumb子元素上输入鼠标时，将触发此事件。

这种技术称为事件委托。

所以...当你向thumb添加更多gallery时，你不必添加更多的听众，因为（像何塞指出的那样）你有附加侦听器到已经在DOM中的父元素。

还有什么，你不必为mouseenter和mouseleave定义两个函数

 $('.gallery').on('mouseenter','.thumb',toggleOpacity)
              .on('mouseleave','.thumb',toggleOpacity)


 function toggleOpacity() {
   $(".opacityParagraph").toggleClass("opacityParagraphVisible")
   $(this).toggleClass("thumbLowOpacity");
 }

你可以更进一步，将$('.opacityParagraph')缓存到变量，这样你的脚本就不会在每个函数调用中搜索DOM中的那些元素。

在每个AJAX元素之后添加脚本标记的替代方法

2 个答案: