すべてのAJAX要素の後にスクリプトタグを追加する代わりに

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

ホセは正しいと思った...しかし、彼はあなたに何も説明しなかった。

あなたが定義する場合：

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

を（あなたがのようにそこだけ多くのリスナーを添付あなたはDOMツリーに現在あるthumbクラスを持つすべての要素を探しているので、あなたがそれらのそれぞれにイベントリスナーを添付することができますthumb要素です）。あなたが

：

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

それは、単一の（あなたが（私はそのようなただ一つの要素があることが推測）galleryクラスを持つすべての要素を検索し、検出されたイベントリスナーをアタッチしていることを意味しイベントリスナー）。 thumbクラスの子要素であるgalleryにマウスを入力すると、このイベントが発生します。

このテクニックはイベント委任と呼ばれます。

だからgalleryにさらにthumbを追加すると、（ホセが指摘したように）リスナーを追加する必要はありません。すでにDOM内にある親要素にリスナーを追加したためです。

多くはである何、あなたがあなたのスクリプトがDOMでそれらの要素を検索しないようにあなたは、変数にさらに行くとキャッシュ$('.opacityParagraph')できmouseenterとmouseleave

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


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

のための2つの関数を定義する必要はありません各関数呼び出しで呼び出されます。

Answer 2

この

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

を使用して試してみて、その追加しているオブジェクトがDOMツリーに新しく追加されたので、そうあなたが直接その未知の.thumを参照する際に想定しmouseleave上

イムのために同じことを行います。 onを使用して、既存の親オブジェクトにrefferingするのは、通常、このトリックです。