ID trigger not working in innerHTML

Question

I have a div ID that triggers some javascript. It works fine outside of the innerHTML, but when I try to only have it trigger when the div ID is clicked (while in the innerHTML) it does not trigger.

The code:

<script type="text/javascript">

function ChangeStyle()
{
    document.getElementById("p1").innerHTML = 
        "<div id='12345' class='button next' class='move next'><a href=\"javascript:void()\">CONFIRM </a></div>";
}

</script>
<span id="p1">
<div class="button"><a href="javascript:void()"     onclick="ChangeStyle();alert('hello');">CONFIRM  </a></div></a>
</span>

The above code works for me on jsFiddle, http://jsfiddle.net/rk58c/. (Yes I have removed `javascript:void()` and added `return:false` but that's just because it's bad practice). — Henrik Ammer, Sep 19 '12 at 14:26
@HenrikAmmer Since when is `javascript:void()` bad practice? http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 — Ian, Sep 19 '12 at 14:29
@ianpgall, that question is from 2008... read [SO: Why is it bad practice to use links with the javascript: “protocol”?](http://stackoverflow.com/questions/2479557/why-is-it-bad-practice-to-use-links-with-the-javascript-protocol) and also the last line of https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/void — Gabriele Petrioli, Sep 19 '12 at 14:31
Why does your `` has a `
` as its `innerHTML` ? `` is an inline element, `
` is a block-level element. — verisimilitude, Sep 19 '12 at 14:33
I changed to and still my id does not trigger the javascript. — Edward J. Gomez, Sep 19 '12 at 14:48
@GabyakaG.Petrioli Unfortunately, technically the "best" practice is not to use a link for this kind of behavior. I highly doubt the OP or anyone who uses links really wants the browser to direct the user to a real page if Javascript is disabled. If the user doesn't want the page to work if Javascript is disabled, then that's their preference...it's not necessarily "better" for them to waste time unobtrusifying it. — Ian, Sep 19 '12 at 14:52
@ianpgall, unobtrusive javascript is not for the case of disabled javascript in browser (*you might be confusing it with progressive enhancement*). It is for seperation of concerns.. HTML for markup of content, CSS for styling, JS for behavior. you can always use `#` and `return false` from the `onclick` handler. — Gabriele Petrioli, Sep 19 '12 at 15:03
@GabyakaG.Petrioli Ahh I see. Nonetheless, if unobtrusive is really being suggested, then it seems like they shouldn't have any `onclick` attribute, and should bind it up in a DOM ready event, and shouldn't have `javascript:void(0)` nor `#` and `return false;` — Ian, Sep 19 '12 at 15:28

score 3 · Answer 1 · answered Sep 19 '12 at 14:24

3

You're adding the class property twice, the one value will always override the other. Combine them into one property, and your code will be working:

Demo

However, if all you want to do is to change the class, you can set the className property of your element.

div.className = 'button next move';

Demo

answered Sep 19 '12 at 14:24

David Hedlund

128,221
31
203
222

my class is not the issue that not triggering it is my "id". if I copy that same html I have in innerHTML and place it outside of the innerHTML code and post as normal, it triggers the javascript. but inside the innerHTML it does not trigger. – Edward J. Gomez Sep 19 '12 at 14:45

score 2 · Answer 2 · answered Sep 19 '12 at 14:29

2

Change your javascript:void() to javascript:void(0)

The above class argument also holds correct.

answered Sep 19 '12 at 14:29

verisimilitude

5,077
3
30
35

score -1 · Answer 3 · answered Sep 19 '12 at 14:23

-1

If all you're trying to do is add a class then can you use

$('div .button).addClass('next');

answered Sep 19 '12 at 14:23

Neil Kennedy

593
1
5
12

This isn't a jQuery question. – Matthew Cox Sep 19 '12 at 14:23

ID trigger not working in innerHTML

3 Answers3