0

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

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

我正在建立这样的列表：

$.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 列表元素。有任何想法吗？

4

1 回答 1

2

那是因为ID 应该始终是唯一的...您有多个具有相同 ID 的元素...您不能有多个具有相同 ID 的元素，尽管它有效但可能会给您带来大问题，例如您的问题现在正面临着它。（只有第一个具有该 id 的元素被调用）。

将您的secondid 更改为 class 并使用 class 选择器

 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) {
   ...

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

于 2013-08-02T09:44:08.747 回答