How to select from dynamically added elements using jquery?

Question

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?

`$('#roomlist').on('click', '.room-selector', function(){ ...... });` — Satpal, May 29 '18 at 11:21
@Satpal this catches the click, but now I get `TypeError: this.attr is not a function`. How to fix this in order to get the element's id? — narad, May 29 '18 at 11:29
Use `this.id` to access property or use ` $(this).attr("id");` — Satpal, May 29 '18 at 12:43

Akhil Aravind · Answer 1 · 2018-05-29T11:32:09.037

0

this should work, take a try

 $('#roomlist li').on('click','.room-selector',  function(){
        console.log('im clicked');
        var roomName = $(this).attr("id");
        console.log('selected room is:', roomName);
    });

edited May 29 '18 at 11:32

answered May 29 '18 at 11:22

Akhil Aravind

4,977
13
31

No, does not work. – narad May 29 '18 at 11:27
change this to $(this) and check – Akhil Aravind May 29 '18 at 11:32
Right, but the first line should be `$('#roomlist').on('click','.room-selector', function(){` as @Satpal indicated above. – narad May 29 '18 at 11:35
both are correct, i am specifying a accurate mark up ul -> li -> item; while satpal said ul -> item – Akhil Aravind May 29 '18 at 11:37
Well for some reason `$('#roomlist li').on...` not work for me but `$('#roomlist').on...` does. – narad May 29 '18 at 11:41
1

@narad `$('#roomlist li')` didn't worked as `li` is also dynamically created so you can use `$('#roomlist').on('click','li .room-selector', function(){` – Satpal May 29 '18 at 12:44

How to select from dynamically added elements using jquery?

1 Answers1