locked
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);

    Saturday, December 29, 2012 3:40 AM

Answers

  • 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.

    • Marked as answer by Song Tian Friday, January 04, 2013 9:40 AM
    Monday, December 31, 2012 3:29 AM

  • 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.

    • Marked as answer by Song Tian Friday, January 04, 2013 9:40 AM
    Monday, December 31, 2012 4:01 AM
    Moderator

All replies

  • 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.

    • Marked as answer by Song Tian Friday, January 04, 2013 9:40 AM
    Monday, December 31, 2012 3:29 AM

  • 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.

    • Marked as answer by Song Tian Friday, January 04, 2013 9:40 AM
    Monday, December 31, 2012 4:01 AM
    Moderator