javascript not working in the new part when loading a new part using jquery and HTML 5

Question

Hi as my title suggest, i use the following code to dynamically load a portion of the page (here left id)

function callBackFunctionLoadNextBackInPage(data)
{
            


        

Answer 1

The function showHideDiv() is not availbe on the main page (list) and is only on the sub page (individual song). In the following code you are retrieving only a subset of the page's dom which means the JS functions you've created in the rest of the page aren't run.

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

You can fix this by including the JS functions you need in the main page.

A possible solution I read about ages ago would be to assign the function to a variable like so:

var showHideDiv = function() {...};

This makes me feel a bit dirty... but what about running an eval on data. Something like:

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

data.find('script').each(function() {
  eval($(this).text());
});

Edit: Perhaps you could try jQuery's globalEval function a try.

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

data.find('script').each(function() {
  $.globalEval($(this).text());
});