Как получить идентификатор из выбранного элемента с помощью «this»

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.

Мне сказали, что я могу «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); 

Все, что с «этим» создает ошибки: Uncaught TypeError: ("#cat" + this.id).attr is not a function...

Попытка отобразить любой из этих вариантов не дает никаких выходных данных (даже не всплывающее окно, когда я установил предупреждение)

Любая помощь будет оценена!

Answer 1

Как вы создаете элементы, такие как

$("#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')) 
    }); 
}); 

Answer 2

Вы загружаете динамические значения. Пожалуйста, используйте Event Delegation. И $.one() связывает событие один раз.

Вы должны добавить это в свою ready функцию.

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

Чтобы получить идентификаторы элементов, используйте $(this).attr("id") или $(this).prop("id") (последняя Jquery) вместо this.id, как иногда, это может вернуть объект JQuery.