javascript - 如何使用 "this"从所选项目中检索 id

Question

我是 jQuery/javascript 新手。我尝试了在这个论坛上找到的一些建议，但到目前为止没有帮助。

这就是我正在尝试的:

从数据库加载类别时(使用ajax)，将为每个类别添加此 HTML 语句:

$("#Links ul").append('<li id=\"cat' + i + '" data-catid=' + i + '>' + categorie_tekst[1] + '</li>');

使用 F12 我发现线条已正确添加。

例如<li id="cat3" data-catid="3">Seafood </li>

下一步是在屏幕中选择一个类别，并使用为 data-catid 设置的值检索该类别的产品。

有人告诉我我可以“this.id”，但到目前为止还没有运气。使用警报显示 this.id 的值会返回正确的值，但由于某种原因我无法使用它。

当我在代码中添加 (#cat3).attr(“data-catid”) 时，它可以工作。但像这样的不同选项不起作用:

("#cat"+ this.id).attr(“data-catid”) 
(this).attr(“data-catid”)
var x = $(this).id();
var rest = x.substr(4, 1);

所有带有“this”的内容都会产生错误:Uncaught TypeError: ("#cat" + this.id).attr is not a function...

尝试显示任何这些选项都不会给出任何输出(当我设置警报时甚至没有弹出窗口)

如有任何帮助，我们将不胜感激!

Answer 1

您正在加载动态值。请使用Event Delegation 。还有$.one()绑定(bind)事件一次。

您需要将其添加到您的 ready 函数中。

$(document).ready(function () {
    $("#Links ul").one("click", ".cat", function(){
        alert($(this).data('catid'))
    });
});

要获取元素的 ID，请使用 $(this).attr("id") 或 $(this).prop("id") (最新的 jQuery) 而不是 this.id，因为有时它可能会返回 jQuery 对象。