Question

我有一个不同div的画廊。它们具有mouseenter和mouseleave功能，可以为元素添加一个类。

当我点击发送带有load（）方法的新图库的链接时出现问题。虽然div具有相同的类，但mouseenter和mouseleave停止工作，并且不添加任何类。有办法解决这个问题吗？

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>

的Javascript

  $(".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");

});

这是在图库中加载的示例之一，如果我从一开始就放置它，那么mouseenter和mouseleea工作得很好，就在没有它添加之后：

<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>

使用AJAX添加的元素上的Mouseenter和Mouseleave

0 个答案: