Javascript jQuery，新元素不可单击

我的网站上有如下列表：

<ul id="listProfiles" class="list-group">
    @foreach($profiles as $profile)
    <li class="list-group-item" profileId="{{ $profile['id'] }}">{{ $profile['name'] }}</li>
    @endforeach
</ul>
<div id="profileResult"></div>

所有其他元素都可以单击。刷新网站后，新元素变得可点击。如何在不刷新的情况下使其工作？

$（“#listProfiles li”）。单击（）

在选定元素（即此时存在的元素）上添加事件侦听器。新元素不会受此影响

解决此问题的最佳方法是使用事件委派。您可以将其视为“动态事件侦听”的一种形式：

事件监听器在

listProfiles

元素上注册，但只有当事件源于元素，并且该元素与作为

on（）

方法的第二个参数传递的选择器相匹配时，才会调用处理程序函数。这样，它将包括以后添加的元素。

$（“#listProfiles li”）。单击（）

将事件侦听器添加到所选元素上，即此时存在的元素。新元素不会受此影响

解决此问题的最佳方法是使用事件委派。您可以将其视为“动态事件侦听”的一种形式：

---

事件监听器在

listProfiles

元素上注册，但只有当事件源于元素，并且该元素与作为

on（）

方法的第二个参数传递的选择器相匹配时，才会调用处理程序函数。通过这种方式，它将包括以后添加的元素。

您是否尝试了（'click'而不是

click

？@milancheda，这不会产生任何影响。会产生影响的是使用事件委派（on（））的三参数形式。@milancheda是的，不适用于

$（“#listProfiles li”）。单击（function（）{

可以更改为

$（“#listProfiles”）。在（'click'、'li'）上，（function（）{

@MilanChheda它可以工作，谢谢！您是否尝试过（'click'而不是

click

？@MilanChheda）上的

而不是
click
？@MilanChheda，这不会有任何区别。会有区别的是使用事件委派（关于（
.on（）的三参数形式）
）。@MilanChheda是的，不运行
$（“
列表配置文件li”）。单击（函数（）{

可以更改为

$（“#列表配置文件”）。在（'click'，li'，（函数（）{

@MilanChheda它工作，谢谢！这与我上面的评论有什么不同？）@Milancheda这是一个正确的答案，是对问题和解决方案的正确解释，这就是它的不同之处！=答案。如果你只留下评论而不回答，人们没有选择把你选为代表。那么，这与我上面的评论有何不同@Milancheda这是一个正确的答案，是对问题和解决方案的正确解释，这就是它的不同之处！=答案。如果你只留下评论而不回答，人们没有选择投票给你代表。

$("#addNewProfileButton").on("click", function () {
    profileName = $("#newProfileInput").val();
    $("#newProfileInput").val('');
    $.ajax({
        method: 'GET',
        data: {
            profileName: profileName
        },
        url: '/addNewProfiles'
    }).success(function (newProfile) {
        console.log(newProfile);
        $("#listProfiles li:last").after('<li class="list-group-item" profileId="' + newProfile.id + '">' + newProfile.name + '</li>');

    }).error(function (msg) {
        console.log(msg);
    });
});

$("#listProfiles li").click(function () {
    profileId = $(this).attr('profileId');
    $.ajax({
        method: 'GET',
        data: {
            profileId: profileId
        },
        url: '/spiderProfileDetails'
    }).success(function (msg) {
        $('#profileResult').html(msg);
    }).error(function (msg) {
        console.log(msg);
    });
});

$("#listProfiles").on("click", "li", handlerFunction);