Attaching events to dynamic content

[xpapad]

I have this code:

var container = document.getElementById( 'container' );
var url = document.createElement( 'a' );

url.setAttribute( 'id', 'dynamic' );
url.setAttribute( 'href', 'http://foo.bar' );
url.innerHTML = 'CLICKME!';
container.appendChild( url );
url.addEventListener( 'click', function( evt ) { evt.preventDefault(); alert( 'OK' ); }, false );

It works fine, but then I add one more line:

container.innerHTML += '<br>';

and it stops working. The event handler isn't called at all. Why is that?
Thanks.

[mitya]

Invoking the browser's HTML parser after via innerHTML after the initial page load is generally a bad idea, hence the Javascript world moved on to DOM scripting.

You've already got some createElement stuff going on, so the change needed here shouldn't be too much of a shell-shock for you.

Change

obj.innerHTML += "<br />";

for

var br = document.createElement('br');
container.appendChild('br');

[xpapad]

This is what I'm using, but I was wondering why the first code didn't work. Thanks