I'd like to let users to select from rooms which are appended into dom dynamically when the user's login is successfull:
$('#login-form').on('submit', function(e) {
e.preventDefault();
var username = $('#login-username').val()
localStorage.setItem("username", username);
socket.emit('loginUser', {
username: $('#login-username').val() ,
password: $('#login-password').val()
}, function(rooms) {
$('.login-area').addClass("hidden");
console.log('rooms are: ', rooms); // ['Public','Fun','Cars']
$('.choose-room').removeClass("hidden");
$.each(rooms, function( index, room ) {
var li= $('<li></li>');
li.html('<h4 class="room-selector" id=' + room + '>'+ room + '</h4>');
$('#roomlist').append(li);
});
$('.error-area').addClass("hidden");
});
});
$('.room-selector').on('click', function(){
console.log('im clicked');
var roomName = this.attr("id");
console.log('selected room is:', roomName);
});
The html div into which the room list is rendered:
<div class="choose-room hidden">
<ul class="list-unstyled" id="roomlist">
</ul>
</div>
But the .room-selector
does not show anything in the console when a room is clicked.
I'm wondering how can I fix this?