Adding Javascript on the fly

Question 1

I got a question in theory... I'm currently at work and can't try it..

If I have the following code :

stuff = '<button onclick="alert(' + "'Test');" + 'my Button</button>';
$("container").html(stuff);

When I click on my new button, will my script work? And will my button be added?

I didn't get any result on JsFiddle...

Question 2

your selector "container" is probably wrong, to start with. Please link to the fiddle.

Question 3

possible duplicate of Can scripts be inserted with innerHTML?

Question 4

I would consider binding the event in JavaScript, in addition to fixing your tag: $("container").replaceAll($("<button>my Button</button>").click(function () { alert("Test"); }));

Question 5

@bfavaretto The quotes look fine. That's the reason he alternates single and double quotes, presumably because he doesn't know how to backslash-escape them. The problem is actually the missing >.

Question 6

@bfavaretto Yes, that's true too. But it's not a problem due to incorrect escaping. :) Of course, there is weird escaping, but not incorrect escaping.

Question 7

Supposing you fix the selector "container" and the unclosed tag, it should work.

But that's not how you bind events properly using jQuery.

You should do this :

$("#container").empty().append(
 $('<button>my Button</button>').click(function(){ alert("Test") })
);

Question 8

After reading the docs, I don't think replaceAll nor replaceWith does the right thing. I was looking for a method that replaces all child elements with the elements in the supplied query. I think the only way to do that is $("#container").empty().appendTo(...). I believe this is what we want in this case to replace .html(...).

Question 9

And good call on editing to use append() instead of appendTo(), as I mistakenly said. After looking at jQuery docs all day you get these methods confused with each other...

Question 10

It would work if you closed the opening button tag correctly

stuff = '<button onclick="alert(' + "'Test');" + '">my Button</button>';
$("container").html(stuff); ^^

Also as pointed out in a comment your selector for container is probably wrong.

Most likely you want one of these 2 depending on if container is a class or id:

$(".container").html(stuff);
$("#container").html(stuff);

Question 11

That would work, but you forgot to close your button tag.

stuff = '<button onclick="alert(\'Test\');">my Button</button>';
$("container").html(stuff);

Denys Séguret 384k90 gold badges813 silver badges780 bronze badges · Accepted Answer · 2013-03-22 17:32:10Z

3

Supposing you fix the selector "container" and the unclosed tag, it should work.

But that's not how you bind events properly using jQuery.

You should do this :

$("#container").empty().append(
 $('<button>my Button</button>').click(function(){ alert("Test") })
);

Share

Improve this answer

edited Mar 22, 2013 at 18:05

answered Mar 22, 2013 at 17:32

Denys Séguret's user avatar

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cdhowie

cdhowie Over a year ago

After reading the docs, I don't think replaceAll nor replaceWith does the right thing. I was looking for a method that replaces all child elements with the elements in the supplied query. I think the only way to do that is $("#container").empty().appendTo(...). I believe this is what we want in this case to replace .html(...).

2013年03月22日T18:00:03.423Z+00:00

cdhowie

cdhowie Over a year ago

And good call on editing to use append() instead of appendTo(), as I mistakenly said. After looking at jQuery docs all day you get these methods confused with each other...

2013年03月22日T18:06:15.833Z+00:00

CollectivesTM on Stack Overflow

Adding Javascript on the fly

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related