如何在jQuery中响应ul - li单击

How to respond to a ul li click in jQuery

本文关键字：ul li 单击 响应 jQuery      更新时间：2023-09-26

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

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

似乎我没有连接正确的东西，因为警报从未显示。

由于您的列表项在创建页面时不存在，因此所有事件将无法对这些元素可用，在这种情况下，您需要应用事件委托以便将事件附加到这些新添加的列表项:

$('#speciesAdded').on('click','li',function () {
    alert($(this).text());
});
相关文章：