jQuery - how to attach handlers to elements which don't exist yet? [duplicate]

Question

I've just encountered a problem in jQuery. I didn't find a solution which was posted already, if there is one, i apologize for my mistake.

I have this DOM:

<div class='usersList list'>                                    
    <div id='7' class='sidebarElement'> <span>user</span></div> 
    <div id='21' class='sidebarElement'><span>user</span></div> 
    <div id='12' class='sidebarElement'><span>user</span></div> 
    <div id='15' class='sidebarElement'><span>user</span></div> 
    <div id='17' class='sidebarElement'><span>user</span></div> 
    <div id='13' class='sidebarElement'><span>user</span></div> 
    <div id='5' class='sidebarElement'> <span>user</span></div> 
    <div id='3' class='sidebarElement'> <span>user</span></div> 
    <div id='4' class='sidebarElement'> <span>user</span></div> 
    <div id='19' class='sidebarElement'><span>user</span></div> 
    <div id='2' class='sidebarElement'> <span>user</span></div> 
    <div id='6' class='sidebarElement'> <span>user</span></div> 
    <div id='18' class='sidebarElement'><span>user</span></div> 
    <div id='16' class='sidebarElement'><span>user</span></div> 
    <div id='14' class='sidebarElement'><span>user</span></div> 
</div>                                                          

It is loaded via AJAX from another file. The problem I've encountered is the following. Here is my JS:

$(document).ready(function () {

    function reloadUsers(query) {
        $.ajax({
            url: 'getLoginUsersAjax.php',
            type: 'GET',
            data: {query: query},
            success: function (data) {
                $('.usersCardAjaxContainer').empty().html(data);
            }
        });
    }

    $(".sidebarElement span").click(function() {
       console.log($(this).parent().attr("id"));
    })

    reloadUsers("");

});

This didn't work, i think because the elements are loaded via AJAX and aren't here yet when the click is parsed or whatever, i don't know how jQuery works internally. My workaround for that was to put the click even into the success branch of the ajax, like this:

success: function (data) {
    $('.usersCardAjaxContainer').empty().html(data);

    $(".sidebarElement span").click(function() {
        console.log($(this).parent().attr("id"));
    })
}

It works, but seems wrong to me. I've looked for other functions or methods which can do that, but i only found live which is deprecated since jQuery 1.7. Is there anything else i can use or will i have to stick with this workaround?

Answer 1

You can attach the click event to an already existing element, yet make it trigger only on certain children of that element, as follows:

$('.sidebarElement').on('click', 'span', function() {
    //...
});

You can technically attach your event to $('body') even, as long as the second argument (which is a jquery selector) is precise enough. I wouldn't recommend this method though as it surely has a negative impact on performance. For reference, take a look at jquery's .on() function.