CODEWITHSUNDEEP
javascriptjqueryhtml
amp
amp

Reputation: 12352

Adding Html using innerHTML property doesn't fire jQuery ready event

I am having some performance issues using .html() method of jQuery because it was being really slow. So I searched for alternatives and I found some:

So I am now replacing the .html() by the method suggested. But now I have another problem:

Javascript that is inside the Html to be added is not being executed.

I have written a simple fiddle to show what is happening:

Can anyone suggest how could I solve this because I need the javascript to be executed.

Upvotes: 0

Views: 459

Answers (2)

dargmuesli
dargmuesli

Reputation: 642

For me the first button fires the script, the second doesn't.

That is because .innerHTML only refers to text within an element, not scipts or other tags.

Upvotes: 0

blex
blex

Reputation: 25659

You might need to eval() the script:

var container = document.getElementById("container"),
    content = document.getElementById("content");

$("#button2").on("click", function(){
    container.innerHTML = content.innerHTML;
    var scripts = container.getElementsByTagName('script');
    for(var i=0, l=scripts.length; i<l; i++) eval(scripts[i].innerText);
});

JS Fiddle Demo

Upvotes: 1

Related Questions