Question

我正在构建一个列表，您可以在其中选择其中一个项目，然后将您带到另一个页面，其中包含有关所选元素的详细信息。

所以我需要知道选择了哪个元素，以构建详细页面。

我正在构建我的列表：

$.getJSON("fakultaeten.js",function(data)
        {
            var list = $('#taskList');
            $.each(data.fakultaeten, function(key,value)
            {
                var mother = "<li id='first'>"+value.name+"<ul>";
                $.each(value.institut, function(key1, value1)
                {
                     var son="<li id='second' data-param='"+value1+"'><a  href='#detail'>"+value1+"/a></li>";           
                    mother+=son;                    
                });
                mother+="</ul></li>";
                list.append(mother);  
            });
            list.listview("refresh");
            return false; 

        });

然后我尝试检测用户何时点击列表项：

$("#second").on("click",function(event) {
                        console.log($(this).text())
                })

但这不起作用。虽然它适用于#first列表元素。有什么想法吗？

Answer 1

那是因为 ID应该始终是唯一的 ...你有更多的那个具有相同id的元素...你不能有多个具有相同id的元素虽然有效但是无效但是可能会让你遇到大问题，比如你现在遇到的问题。（只有第一个被调用id的元素）。

将您的second ID更改为类并使用类选择器

 var son="<li class='second' data-param='"+value1+"'><a  href='#detail'>"+value1+"/a></li>";

<强> jquery的

 $("ul").on("click",'.second',function(event) {
         console.log($(this).text())
 })

注意，on()，您应该将其委托给我认为ul的最近的静态父级，否则您可以将其委托给文档

 $(document).on("click",'.second',function(event) {
   ...

但是建议使用文档中最接近的静态父级。

使用jQueryMobile / HTML传递所选列表元素的数据

1 个答案: