jquery - 如何通过单击创建动态的列表视图中的项目来获取数据？

Question

我创建了一个动态列表视图，我想从我单击的列表视图中的行中获取数据（数据显示在列表视图上，因此“附加”工作完美），当我单击时我得到“未定义”并且尝试将数据输入“x”，我不明白为什么！

我的代码：

for (var i = 0; i < json_parsed.Categories.length; i++){
        var cars= json_parsed.Categories[i];


        $('#categoryList').append($('<li   data-categoryId = cars.car_name>').html(' <a href="#"  onclick = "temp()" >'+cars.car_name+</a>'));
}


function temp () {
   var x = $(this).data('categoryId');  
   alert (x);   
};

谢谢提前

Answer 1

由于您使用的是 jQuery，因此您可以绑定onclick如下事件。

$('#categoryList').on('click', 'li', function () {
    var x = $(this).data('categoryId');
    alert(x);
});

完整代码：（修复了 for 循环中的一些内容）

var cars;
for (var i = 0; i < json_parsed.Categories.length; i++){
   cars = json_parsed.Categories[i];
   $('#categoryList').append('<li data-categoryId="' + cars.car_name + '"><a href="javascript:void(0)" >' +cars.car_name + '</a>');
}    

$('#categoryList').on('click', 'li', function () {
    var x = $(this).data('categoryId');
    alert(x);
});

---

编辑：

谢谢，但它不起作用......我在这里添加我的代码！谢谢提前！

您错过了提及您使用的是 jQuery 版本 1.6.4。

无论如何更改如下点击处理程序，

$('#categoryList').delegate('li', 'click', function() {
    var x = $(this).data('categoryid');
    alert(x);
});

演示

Answer 2

Live 一直是处理绑定动态内容的传统方式。但是，jQuery 建议对 jQuery 1.7+ 使用 on()。http://api.jquery.com/live/

例子：

$('element').on('click', function(){//Do something});

Answer 3

您需要使用实时事件，即一个 eventHandler，它将绑定到页面加载时未创建的元素，但稍后会创建，即。即将到来。

// delegate to #categoryList if it already in DOM in page load

$('#categoryList').on('click', 'li', function() {
   var x = $(this).data('categoryId');  
   alert(x);
});