Add onclick event programmatically to listitems

Question

Hi,

I'm creating several listitems programmatically and I'd like to add onclick events to them.  I tried using the code below but it's not working.  The eventlistener actually fires off only when I'm creating the list items, not when I click on them.

var listItem = document.createElement('li');

listItem.textContent = "Test"

listItem.addEventListener(

"click", ShowDetails(listitemdescription), false);

list.insertBefore(listItem);

Answer 1

Hi,

Every control provides events that enable you to respond to actions from the user. For example, the button control provides a click event that is raised when a user clicks the button. You create a function, called an event handler, to handle the event and then you register the event handler with the control.

There are two ways to register an event handler. One way is to add an event handler in your HTML by setting the control's event attribute to the name of a JavaScript event handler function or a JavaScript statement. The other way to add an event handler is to add it programmatically. This is the approach we recommend.

More details, please refer to: http://msdn.microsoft.com/en-us/library/windows/apps/hh465402.aspx .

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi Teodelas,

I just found a small issue in the code you provided. You use the following statment to register the "click" event handler for the <li> element:

listItem.addEventListener("click", ShowDetails(listitemdescription), false); 

however "ShowDetails(listtemdescription)" means you are invoking the "ShowDetails" function. Generally, the click event handler should be a function which doesn't take any input arguments). So you should change it to below (if "ShowDetails" does be the correct function name of your click handler):

listItem.addEventListener("click", ShowDetails, false); 

or for testing purpose, you can simply supply an anonymous function as the event handler. e.g.

listItem.addEventListener("click", function (){
 // do something here
}
);

For more information about handling events of html or winjs controls, you can refer to the document provided by Song Tian.

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.