Adding Javascript on the fly

Question

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...

your selector "container" is probably wrong, to start with. Please link to the fiddle. — Denys Séguret
– Denys Séguret, Commented Mar 22, 2013 at 17:29
possible duplicate of Can scripts be inserted with innerHTML? — Quentin
– Quentin, Commented Mar 22, 2013 at 17:30
I would consider binding the event in JavaScript, in addition to fixing your tag: $("container").replaceAll($("<button>my Button</button>").click(function () { alert("Test"); })); — cdhowie
– cdhowie, Commented Mar 22, 2013 at 17:32
@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 >. — cdhowie
– cdhowie, Commented Mar 22, 2013 at 17:49
@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. — cdhowie
– cdhowie, Commented Mar 22, 2013 at 17:52

Denys Séguret · Accepted Answer · 2013-03-22 18:05:21Z

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

edited Mar 22, 2013 at 18:05

answered Mar 22, 2013 at 17:32

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

2 Comments

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(...).

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...

cowls · Accepted Answer · 2013-03-22 17:29:53Z

2

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

answered Mar 22, 2013 at 17:29

cowls

24.4k9 gold badges51 silver badges78 bronze badges

Comments

Ben McCormick · Accepted Answer · 2013-03-22 17:30:09Z

0

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

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

answered Mar 22, 2013 at 17:30

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

Collectives™ on Stack Overflow

Adding Javascript on the fly

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related