Calling Javascript in a page after it's been loaded by jQuery GET

Question

Imagine a normal page calling javscript in head. The trouble is some of the content isnt loaded untill i click on a link. Subsequently when this link loads the content it wont work. This is because i guess the javascript has already been run and therefor doesnt attach itself to those elements called later on. There is only standard html being called.

So for example this is the code which calls my external html.

$.get('content.inc.php', {id:id}, function(data){
        $('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
           $(this).html(data).slideDown('slow');
        });
    });

If the html i was calling for example and H1 tag was already in the page the cufon would work. However because i am loading the content via the above method H1 tags will not be changed with my chosen font.This is only an example. The same will apply for any javascript.

I was wonering whether there is a way around this without calling the the javascript as well the html when its received from the above function

Answer 1

Does Cufon.refresh() do what you want?

As you said Cufon was just an example, I'd also suggest a more general:

$.get(url, options, function(html, status) {
    var dom = $(html);
    // call your function to manipulate the new elements and attach
    // event handlers etc:
    enhance(dom);

    // insert DOM into page and animate:
    dom.hide();
    $target_element.append(dom); // <-- append/prepend/replace whatever.
    dom.show(); // <-- replace with custom animation
});

Answer 2

If you want to attach events to elements on the page that are dynamically created take a look at the "live" keyword.

$('H1').live("click", function() { alert('it works!'); });

Hope this is what you were looking for.

Answer 3

You can attach event handlers to the data that you get via the get() inside of the callback function. For example

$.get('content.inc.php', {id:id}, function(data){
    $('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){        
        $(this).html(data).find('a').click(function(e) {
            // specify an event handler for <a> elements in returned data
        }).end().slideDown('slow');
    });
});

live() may also be an option for you, depending on what events you want to bind to (since live() uses event delegation, not all events are supported).

Answer 4

Andy try this. It will call the Cufon code after each AJAX request is complete and before the html is actually added to the page.

$.get('content.inc.php', {id:id}, function(data){
    $('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
        $(this).html(data);
        Cufon.replace('h1');
        $(this).slideDown('slow');
    });
});

Answer 5

JavaScript is not executed because of a security reason OR beccause jQuery is just setting this element's innerHTML to some text (which is not interpreted as a JavScript) if it's contained. So the security is the beside effect.

How to solve it?

try to find all SCRIPT tags in Your response and execute them as fallows:

var scripts = myelement.getElementsByTagName("SCRIPT");
var i = 0;

for (i = 0; i < scripts.length; i++)
   eval(scripts[i].innerHTML);