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 problem is that jQuery strips out <script> tags whenever you create a jQuery object from a HTML string to do some DOM manipulations on it, in your case .find().

Your best bet is to read the whole HTML as text, then use regular expressions to chop it up and put the relevant part into your document. You should also think about redesigning part of your project, as in my opinion loading parts of an external page with partial scripts is not a good practice and could be hard to maintain in the long term. Unless of course it's a well thought out modular design you've got there and you know what you're doing.

This issue is an exact duplicate of a different thread, although I can't vote to close it due to the bounty. Have a look at my answer here and see if it helps: jquery: Keep <script> tag after .find()

Answer 2

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

Answer 3

I think that the problem is the order in which your events are firing. When you load the page normally, the discuss js is most likely run when load fires. So when you load with ajax, it won't fire the load event. Instead, you will have to initialize these compontent in you callBackFunctionLoadNextBackInPage method or use another callback.

$.post(url,parm,function(data) {
    callBackFunctionLoadNextBackInPage(data);

    // Initialize here
    $('.element').plugin_initializer();

},'html');

Answer 4

Try replacing onclick with jquery live() and see if it wokrs. Also your showHideDiv could be reduced to one line:

$("#share").toggle()