jQuery-如何将处理程序附加到尚不存在的元素？

Question

我刚在jQuery中遇到问题。我没有找到已经发布的解决方案，如果有，我为我的错误表示歉意。

我有这个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>                                                          

它是通过AJAX从另一个文件加载的。我遇到的问题如下。这是我的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("");

});

这是行不通的，我想是因为元素是通过AJAX加载的，并且在click解析等等时还没有在这里，我不知道jQuery在内部如何工作。我的解决方法是将点击均匀地放入successajax 的分支中，如下所示：

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

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

它有效，但是对我来说似乎是错误的。我一直在寻找其他可以做到这一点的函数或方法，但是我只发现live自jQuery 1.7起就不推荐使用。我还能使用其他任何方法吗？还是我必须坚持这种解决方法？

Answer 1

您可以将click事件附加到已经存在的元素上，但使其仅在某些元素上触发，如下所示：

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

$('body')只要第二个参数（这是一个jquery选择器）足够精确，就可以从技术上将事件附加到偶数。我不建议使用此方法，因为它肯定会对性能产生负面影响。作为参考，请看一下jquery的.on（）函数。