javascript - 如何在 jQuery 中响应 ul li 点击

Question

我在引导面板中嵌入了以下无序列表。用户在运行时动态地向其中添加项目。

<div class="row">
        <div class="col-md-2 panel panel-default">
            <div class="panel-heading">Species Seen</div>
            <div class="panel-body" style="height: 400px; overflow:auto">
                <ul id="speciesAdded" class="list-group">
                </ul>
            </div>
        </div>
</div>

我正在尝试通过 jQuery 响应用户单击其中一项:

   $(document).ready(function () {
        $('ul#speciesAdded li').click(function () {
            alert($(this).text());
        });
    })

似乎我没有正确接线，因为警报从未显示。

Answer 1

由于创建页面时您的列表项不存在，因此这些元素将无法使用所有事件，在这种情况下您需要应用 event delegation 为了将事件附加到这些新添加的列表项:

$('#speciesAdded').on('click','li',function () {
    alert($(this).text());
});