how to trigger my script from innerHTML

[sapo]

okay so I have a locker that get triggered through an ID. Works fine in regular HTML but once I place the trigger link in innerHTML it will not trigger my locker.

that normal code that triggers the locker is (id that trigger is "pop")

<a id="pop" href="javascript:void()">How the Locker POPS Normally</a>

and this is the code I use on innerHTML, but it does not trigger the locker

<script type="text/javascript">
function ChangeStyle()
{
  document.getElementById("p12").innerHTML = "<div class=\"button\"><a id=\"pop\" href=\"javascript:void()\">Second Button - innerHTML (this Should trigger the Locker)</a></div>";
}

</script>
	    <span id="p12">
 <div class="button"><a href="javascript:void()" onclick="ChangeStyle();">First Button (this should trigger innerHTML) </a></div></span>

Now this doesnt work, I know its something to do how innerHTML handles this or something, Ive been reading alot and trying alot of things Like, trying to trigger the fucntion() , trying onclick, a bunch but its out of my element to figure out at this time. I hate asking question but when you need help you need help.

I have set up a live site so you can see the code and everything in its entirety so you can properly evaluate it.

http://bit.ly/PWRNZG

Thanks any help is appreciated.

 

[jazzc]

It does not work because there is a javascript error after you click the first link.

Syntax error at line 1 while loading: expected expression, got ')'void()

 

[Zapdos]

Why not use jQuery and make it simple?

// Insert jquery
<script src="/jquery.js" type="text/javascript"></script>

<span id="p12">
    <div class="button">
        <a id="initpop" href="#_">First Button (this should trigger innerHTML) </a>
    </div>
</span>

<script type="text/javascript">
$('#initpop').click(function() {
  $('#p12').html('<div class="button"><a id="pop" href="#_">Second Button - innerHTML (this Should trigger the Locker)</a></div>');
});
</script>

 

[sapo]

It does not work because there is a javascript error after you click the first link.

Syntax error at line 1 while loading: expected expression, got ')'void()

added the "0" in void(0) still doesnt work

Why not use jQuery and make it simple?

// Insert jquery
<script src="/jquery.js" type="text/javascript"></script>

<span id="p12">
    <div class="button">
        <a id="pop" href="#_">First Button (this should trigger innerHTML) </a>
    </div>
</span>

<script type="text/javascript">
$('#pop').click(function() {
  $('#p12').html('<div class="button"><a id="pop2" href="#_">Second Button - innerHTML (this Should trigger the Locker)</a></div>');
});
</script>

Keep in mind I had to change the actual javascript around as you were trying to use it on a non-existant id. So the initial html had the pop ID added to the link, and when clicked the html is changed and the ID of the new link is pop2.

I just tested that and changed the trigger to pop2 on this and it still doesnT work. It goes to the second link but doesnt trigger the locker

I added the test page i used it on so you can see it.

http://bit.ly/RyNCFl