Add a Javascript dependency to an HTML file loaded in Ajax with Jquery

Question

Here is what I'm trying to do (check at the very end of the post to see my issues):

I have 2 html files: index.html and modal.html. And 2 javascript files: script.js and modal.js

I would like, with an Ajax call, to load modal.html into index.html, and to load modal.js only when I load my modal.html.

This actually works, but is it possible to make modal.js only works for modal.html (make it act like a specific controller)? Or is it possible to unload modal.js?

My code below so you can understand my problem:

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();
})

This code works, but I have 3 issues :

1. the button .specific-action works both on the index and the modal => is it possible to make it work only for the modal?
2. on script.js, I load modal.js everytime I load modal.html. If I dont, modal.js will not work for modal.html since the DOM has changed after it was loaded => for a large script, will it affect the performance?
3. modal.js is still active when I remove the modal. Is there a way to delete this file or make it inactive?

Answer 1

When you bind the event to the elements with a speficic class, the event will remain until the element exists. A simple way to differ the elements is to add an identification to your modal DOM estructure:

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

And use this id to bind all events that concerns to the modal:

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

Then, when you unload or remove the elements of the modal, their events will be removed as well.

Answer 2

1. Make selector more specific so you only target the element inside the modal $(".modal-content .specific-action")
2. Loading same script numerous times can be tricky if you add same event handlers repeatedly to existing elements or overwrite existing varibles/objects etc. No simple answer based on code you are using
3. You can't remove script that has already been compiled

Answer 3

There is no need to load modal.js multiple times. Add a variable to modal.js and check whether it exists. Something like this.

//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);
        }
    });
})