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

我似乎对此有问题，但我不确定它是什么。
我有一个链接列表的画廊，每个链接都带有一堆div元素，与Jquery load()方法异步。在每个AJAX元素之后添加脚本标记的替代方法

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>

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

有没有更好的解决方案呢？

来源

2016-12-02 Sergi

你可以委托这些事件，对吗？！ –

何塞得到了它的权利......但他没有向你解释任何事情。

当你定义：

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

您正在寻找与thumb类是目前在DOM树中的所有元素，所以你可以将一个事件侦听器，他们每个人的（您连接尽可能多的听众，因为是thumb元素）。

当你这样做：

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

这意味着你正在寻找与gallery类（我相信有只有一个这样的元素）的所有元素，并附加一个事件侦听器给它（单事件监听器）。当您在thumb类中的任何gallery子元素上输入鼠标时，此事件将触发。

这种技术被称为事件委托。

因此......当您将更多thumb添加到gallery时，您不必添加更多侦听器，因为（如Jose指出的那样）您已将监听器添加到已在DOM中的父元素。

更重要的是，你不必定义mouseenter和mouseleave

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


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

你可以再进一步，缓存$('.opacityParagraph')可变两种功能，所以您的脚本将不会寻求在DOM这些元素在每个函数调用。

来源

2016-12-02 11:48:08 grzesiekgs

感谢您的详细解释，它现在按预期工作。 – Sergi

尝试使用此

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

，做同样的对鼠标离开

林假设它的，因为你要添加的对象是新的DOM树，所以当你引用.thum直接的未知。使用on并且重新回到一个已经存在的父对象通常会这样做。

来源

2016-12-02 11:36:02

你的anserw是正确的，但你也应该向他解释你在那里做了什么。 – grzesiekgs

看到我的解释@grzesiekgs。我相信那是正确的。 –

'使用并重新访问已经存在的父对象通常会做这个诀窍。'它没有解释你做了什么，而'通常'部分是错误的。 – grzesiekgs

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

回答

相关问题