Question

Can someone please have a look at this code in which every function works perfect but only the click event (which is at last of the code)

 $('ul#showUsernames li').on('click', function () {
    selectedUsername = $(this).text();
    if (selectedUsername != chatUsername) {
        chatTitleName.text("Chat between " + chatUsername + " and " + selectedUsername);
    }
 });

Here I used .click and also bind('click',function they too didnt work.

I am using on here because I am generating the li elements dynamically through jQuery.

I am not sure whether this matters here or not that I am using SignalR in my project.

Please help.

Answer 1

use event delegation with on()

$('#showUsernames').on('click', 'li', function () {
   ...

this will work also for dynamically inserted list-items and it will be more performant (since you’re attaching a single event handler on your ul instead of n handlers on the li elements.

As a sidenote just use $('#showUsernames') instead of $('ul#showUsernames') since it’s faster (it’s like a straight getElementById)