Question

我的网站上有这样的列表：

<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>

当我使用下面的函数将新元素添加到此列表时：

$("#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);
    });
});

所有其他元素均可点击。刷新网站后，新元素变为可点击。如何让它无需刷新？

Answer 1

$("#listProfiles li").click()在所选元素上添加事件侦听器，即当时存在的元素。新元素不会受此影响。

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

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

事件侦听器在listProfiles元素上注册，但只有当事件源自作为on()方法的第二个参数传递的选择器匹配的元素时才会调用处理函数。这样它将包含稍后添加的元素。

jQuery，新元素不可点击

1 个答案: