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

您可以将click事件附加到现有元素，但只对某些元素进行触发，如下所示：

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

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

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

1 个答案: