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, Mar 22 '13 at 17:29
possible duplicate of [Can scripts be inserted with innerHTML?](http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml) — Quentin, Mar 22 '13 at 17:30
I would consider binding the event in JavaScript, in addition to fixing your tag: `$("container").replaceAll($("").click(function () { alert("Test"); }));` — cdhowie, Mar 22 '13 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, Mar 22 '13 at 17:49
@cdhowie Agree on the binding via JS, but I would do `var $('').appendTo('container').click(function () { alert('Test'); }));`. IIRC `replaceAll` puts the original selector into the functions argument. — Snuffleupagus, Mar 22 '13 at 17:50
@Snuffleupagus That's why `replaceAll()` wraps the *entire* subexpression. Unwrap my code and indent it in an editor and you will see. — cdhowie, Mar 22 '13 at 17:52
@cdhowie You're partially correct, but it's also missing a double quote before `>` to close the attribute. — bfavaretto, Mar 22 '13 at 17:52
@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, Mar 22 '13 at 17:52
@cdhowie I meant you had the replaceAll syntax backwards - see [fiddle](http://jsfiddle.net/9GsD2/1/) and [documentation](http://api.jquery.com/replaceAll/). You should be calling `replaceAll` on the button, passing the container as the argument. It replaces all instances of the argument with the origin. — Snuffleupagus, Mar 22 '13 at 17:55
@Snuffleupagus I see. In that case, `replaceAll()` isn't the right function to use in this context, no matter how you invoke it. It looks like `.empty().appendTo(...)` is the correct replacement. — cdhowie, Mar 22 '13 at 17:59
Wow! thank for all the reply! I admit that the I've miss the '#' for the container and the '>' on the button. And yes, I don't know how to escape string in Java! I'm new to the process! I think I'll look it up so I have nicer code. — Daniel Berthiaume, Mar 22 '13 at 18:06
@DanielBerthiaume This is JavaScript, not Java. They are completely different languages with almost *nothing* in common, besides similar-looking syntax. — cdhowie, Mar 22 '13 at 18:09

Denys Séguret · Accepted Answer · 2013-03-22T18:05:21.833

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 '13 at 18:05

answered Mar 22 '13 at 17:32

Denys Séguret

372,613
87
782
758

1

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 Mar 22 '13 at 18:00
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... – cdhowie Mar 22 '13 at 18:06

score 2 · Answer 2 · answered Mar 22 '13 at 17:29

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

score 0 · Answer 3 · answered Mar 22 '13 at 17:30

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 '13 at 17:30

Ben McCormick

25,260
12
52
71

Adding Javascript on the fly

3 Answers3