Question

I am making a todo list webapp in pure JS (trying not to use jQuery!) and I’m struggling on one aspect, attaching a click handler onto an element I’ve just created. Here is the creation code:

new_li = document.createElement('li');
new_li.innerHTML = item.value;
new_li.setAttribute('rel', time);
prependElement(tudu_list, new_li);

This happens onclick of a button.

I need to attach a click handler onto every LI in a UL. But nothing happens when I click a newly created LI. I’m guessing its an issue where there is no click handler bound to the element. In jQuery I would normally do .live(), but in JS, I have no idea how to get around this issue!

Answer 1

One way is:

function clickHandler(){
    // Do something...
}

new_li = document.createElement('li');
new_li.innerHTML = item.value;
new_li.setAttribute('rel', time);
new_li.onclick = clickHandler; // <===========
prependElement(tudu_list, new_li);

Of course you can (and should) use addEventListener instead of inline scripts:

new_li.addEventListener('click', clickHandler)