CODEWITHSUNDEEP
jqueryajax
Keith A
Keith A

Reputation: 811

Loading external html and then execute script

Firstly, forgive me if the title is vague, can't seem to think of the right question to ask.

Anyway, I'm trying to load an external html with JQuery using ajax load function like so:

$("a").click(function(){
    $(".contentWrapper").load(pageURL+" .externalContent","ajax=true",function(){
    //some more code here
    });
});

What this does (according to how I understand it) is load the contents of an element with a class .externalContent from the page pointed to by pageURL after parsing it from the returned html data.

My problem is .externalContent has some scripts associated with it in its original page. What should I do to have those scripts executed once the .externalContent has been loaded.

Simply putting the script in the calling page doesn't work as the div does not exist when the script gets called on document.ready, at least from how I understand it.

I've also tried putting the scripts inside the ajax success option but I cant seem to get it working. Sorry if I'm not making much sense I've been at this all night. I'm new to JQuery and would appreciate any help, including better ways to code things like this. Thanks!

Upvotes: 1

Views: 949

Answers (1)

chadpeppers
chadpeppers

Reputation: 2057

The ajaxComplete function could be used here or the delegate function

http://api.jquery.com/ajaxComplete/

$(".contentWrapper").ajaxComplete(function(){
 //execute even handlers here
});

or

jquery delegate This will be universal to the selector, even after its loaded ajax http://api.jquery.com/delegate/

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

Upvotes: 1

Related Questions