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 在内部是如何工作的。我的解决方法是将点击甚至放到 ajax 的 success 分支中，如下所示：

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

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

它有效，但对我来说似乎是错误的。我已经寻找可以做到这一点的其他函数或方法，但我只找到了自 jQuery 1.7 以来已弃用的 live。还有什么我可以使用的或者我必须坚持这个解决方法吗？

Answer 1

您可以将点击事件附加到一个已经存在的元素上，但让它只在该元素的某些子元素上触发，如下所示：

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

您甚至可以在技术上将您的事件附加到$('body')，只要第二个参数（它是一个 jquery 选择器）足够精确。我不会推荐这种方法，因为它肯定会对性能产生负面影响。 供参考，请查看jquery's .on() function。