如何使用＆＃34来检索所选项目中的ID＃34;

Question

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

这就是我想要的：

从数据库加载类别（使用ajax）时，会为每个类别添加此HTML语句：

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

使用F12我看到线条已正确添加。

E.g。 <li id="cat3" data-catid="3">Seafood </li>

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

我被告知我可以＆＃34; this.id＆＃34;但到目前为止还没有运气。使用alert显示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);

所有与＆＃34;这＆＃34;创建错误：Uncaught TypeError: ("#cat" + this.id).attr is not a function...

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

任何帮助将不胜感激！

Answer 1

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

您需要在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对象。

Answer 2

在创建像

这样的元素时

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

使用jQuery创建元素

$("#Links ul").append( $('<li></li>', {
    class: "cat",
    id: "cat" + i,
    data-catid: i,
    text: categorie_tekst[1]
});

在动态创建元素时，请使用Event Delegation。您必须使用委托事件方法来使用.on()。

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