获取点击

Question

我有以下HTML。

<div id="programsData">
    <ul id="programsDataItems">
    </ul>
</div>

我使用jQuery使用此代码片段填充列表。假设它将列表项（Item1和Item2）附加到列表中。

$.each(data, function (i, val) {
    $("#programsDataItems").append("<li><a href='#'>" + val.Value + "</a></li>");
})

这是我点击列表项目的功能：

$("#programsDataItems").click(function (e) {
    var selectedLi = $(this).text;
    e.preventDefault();
});

当我点击列表项时，上面的函数返回：Item1Item2。我只需要一个列表项。有人能告诉我如何获得单击的列表项吗？我是否需要修改我加载列表项的方式？

Answer 1

替换

$("#programsDataItems").click(function (e) {

与

$("#programsDataItems").on("click", "li", function (e) {

通过这种方式，您可以在回调中获得正确的上下文（this），delegation将确保您仍然可以在LI之后动态添加#programsDataItems元素绑定。

请注意，如果仅用于更改光标，则不应在A元素中添加LI元素。为此，您只需在CSS中设置cursor:pointer。

Answer 2

您将事件分配给列表，而不是列表中的特定项目。试试

$("#programsDataItems li").click(function (e) {
    var selectedLi = $(this).text;
    e.preventDefault();
});