I've been frustated trying to find the best way to load and unload some JS file via jQuery, this was last what I can do:

  $("#button").live("click", function(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
  });

What I want to do is to load some page via jQuery, and at same time it will include appropriate external JS file for current page that been loaded, it work fine for the first time, but when I click the button again, the last JS still loaded, so it will trigger the function inside JS file twice time for same page.

I've been try use .append, also by change <script> attribute and create dynamicaly <script> element but still, all i got is same result.

I've been frustated trying to find the best way to load and unload some JS file via jQuery, this was last what I can do:

  $("#button").live("click", function(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
  });

What I want to do is to load some page via jQuery, and at same time it will include appropriate external JS file for current page that been loaded, it work fine for the first time, but when I click the button again, the last JS still loaded, so it will trigger the function inside JS file twice time for same page.

I've been try use .append, also by change <script> attribute and create dynamicaly <script> element but still, all i got is same result.

• javascript
• jquery
• jquery-plugins
• programming-languages

2 Answers 2

You can't "unload" JavaScript. Once it's loaded, it's loaded. There's no undo.

However, you can detach event handlers. See: http://api.jquery./unbind/

live() is a special case for unbind(), though. Live event handlers are attached to document rather than the element, so you have to remove the handler like so:

$(document).unbind('click');

However, that would probably remove more handlers than just the one in question, so you can do one of two things: 1) name your handler function or 2) create a namespace.

Naming handler function

function myClickHandler(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
}

$("#button").live("click", myClickHandler);

// And later ...

$(document).unbind('click', myClickHandler);

Namespacing

$("#button").live("click.myNamespace", function(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
});

// And later...

$(document).unbind('click.myNamespace');

UPDATE:

As @RTPMatt mentions below, die() is actually more appropriate. The method described above will work, but die() is easier to use. However, with die() you must match the selector exactly to the one used when you called live() or the results may be unpredictable:

$("#button").live("click", function(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
});

// And later ...

$('#button').die('click');

You could even have a "placeholder function" and check for its existence before loading the script again. But, first, i think it would be better to load the page and only after load the external script (and only if it's needed)

$("#button").live("click", function()
{
  var pl = $(this).attr('rel');
  //now we load the page, and then the "plete" callback function runs
  $('#container').load(""+ siteAddress +"load/"+ pl +"/", function() 
  {
    we check if the function is present into memory
    if (typeof window["page_" + pl + "_init"] == 'undefined')
    {
      //function not found, we have to load the script
      $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'');
    }
  });
});

Into the external script you will need to have the function

function page_abcde_init()
{
  //this is just a place holder, or could be the function used
  //to initialize the loaded script (sort of a document.ready)
}

Where "abcde" of "page_abcde_init()" is the value of the clicked element var pl = $(this).attr('rel');