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

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

Turning live() into on() in jQuery (5 个回答)

已关闭 8 年前。

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

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

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

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

Answer 1

您可以将点击事件附加到现有元素，但使其仅在该元素的某些子元素上触发，如下所示:

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

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