は、ここでのjQuery

Question

とアヤックスにロードされたHTMLファイルにJavascriptの依存関係を追加します（私の問題を確認するために、ポストの一番最後に確認してください）私がやろうとしているものです：

私は2つのhtmlファイルを持っています： index.htmlとmodal.html。そして、2つのjavascriptファイル：script.jsとmodal.js

私はmodal.htmlをindex.htmlにロードし、modal.htmlをロードするときにのみmodal.jsをロードしたいと思います。

これは実際には動作しますが、modal.jsをmodal.htmlに対してのみ動作させることは可能です（特定のコントローラのように動作させる）？または、modal.jsをアンロードすることは可能ですか？

以下の私のコードあなたは私の問題を理解することができるように：

Index.htmlと

<a href="modal.html" class="open-modal">Open a modal</a> 

<a href="" class="specific-action">Both on index.html and modal.html</a> 

<script src="js/script.js"></script> 

modal.html

<div class="modal-content"> 
    <h2>My Modal</h2> 
    <a href="" class="specific-action">Both on index.html and modal.html</a> 
    <a href="" class="close-modal">close the modal</a> 
</div> 

script.js

$(".open-modal").click(function(e){ 
    e.preventDefault(); 
    var modalURL = $(this).attr("href"); 
    $("body").prepend($("<div/>").attr("id", "modal-container-global")); 
    $("#modal-container-global").load(modalURL, function(response, status, xhr){ 
     if(status == "success"){ 
      $.getScript("js/modal.js"); 
     } 
    }); 
}) 

modal.js

$(".specific-action").click(function(e){ 
    e.preventDefault(); 
    console.log("testing"); 
}) 

$(".close-modal").click(function(e){ 
    e.preventDefault(); 
    $("#modal-container-global").remove(); 
}) 

このコードは動作しますが、私は3つの問題を持っている：

1. インデックスの両方を動作し、それが可能モーダル=>です .specific-actionボタンそれはモーダルのためだけに機能するように？ script.jsの
2. 私はmodal.htmlを読み込むたびにmodal.jsを読み込みます。 modal.jsはmodal.htmlでは機能しません。大規模なスクリプトではDOMが変更された後に変更されているため、パフォーマンスには影響しますか？
3. モーダルを削除すると、modal.jsはまだアクティブです。このファイルを削除する方法や、非アクティブにする方法はありますか？

Answer 1

speficicクラスの要素にイベントをバインドすると、イベントは要素が存在するまで残ります。ときに、次に

// On modal.js 
$("#my-modal .specific-action").click(...) 

：

<div id="my-modal" class="modal-content"> 

モーダルに関係するすべてのイベントをバインドするために、このIDを使用します。要素を異なるする簡単な方法は、あなたのモーダルDOMのestructureに識別情報を追加することですアンロードまたはモーダルの要素を削除すると、それらのイベントも削除されます。

Answer 2

1. メイクセレクタより具体的なあなただけが既存のvaribles /オブジェクトなどを既存の要素に、繰り返し同じイベントハンドラを追加したり、上書きした場合、多くの時間はトリッキーなことができるのと同じスクリプトをロードするモーダル$(".modal-content .specific-action")
2. 内の要素をターゲットので、コードに基づいて簡単な答えはありませんあなたは
3. を使用しているあなたは、すでに

Answer 3

modal.js複数回ロードする必要はありませんがコンパイルされたスクリプトを削除することはできません。変数をmodal.jsに追加し、変数が存在するかどうかを確認します。このようなもの。

//modal.js 
var modal_loaded = 123; 
function initModal(){ 
$("#modal-container-global .specific-action")//restrict .specific-action to modal 
    .click(function(e){ 
    e.preventDefault(); 
    console.log("testing"); 
}) 

$(".close-modal").click(function(e){ 
    e.preventDefault(); 
    $("#modal-container-global").remove(); 
}) 
}//initModal 

//script.js 
$(".open-modal").click(function(e){ 
    e.preventDefault(); 
    var modalURL = $(this).attr("href"); 
    $("body").prepend($("<div/>").attr("id", "modal-container-global")); 
    $("#modal-container-global").load(modalURL, function(response, status, xhr){ 
     if(status == "success"){ 
      if(modal_loaded !== undefined) 
       initModal(); 
      else 
       $.getScript("js/modal.js", initModal); 
     } 
    }); 
})