Question

我真的希望这没有一个简单的解释，因为那意味着很多很多时间的损失（虽然这不会改变它们无论如何都会丢失的事实。）一些帮助或踢一下正确的方向将是一个截止日期。请。

我正在努力实现以下目标;

1。）创建一个由JSON文件填充的链接列表（工作）
2.）绑定每个li上的click事件或将类别对象传递给构建器函数（认为这有效） 3.）用户反对做一些很酷的东西

但是，一旦我达到构建器功能，就会发生一些奇怪的重复。

考虑我的名为categories.json的JSON文件：

[
{   
    "category": [
        {
            "id": "1",
            "title": "Title 1",
            "values": [
                {
                    "eg": [
                        {
                            "number": "12000000"
                        }
                    ]
                }
            ]
        }
    ]
},
{   
    "category": [
        {
            "id": "2",
            "title": "Title 2",
            "values": [
                {
                    "eg": [
                        {
                            "number": "37000000"
                        }
                    ]
                }
            ]
        }
    ]
},
{   
    "category": [
        {
            "id": "3",
            "title": "Title 3",
            "values": [
                {
                    "eg": [
                        {
                            "number": "37000000"
                        }
                    ]
                }
            ]
        }
    ]
}
]

然后我肯定会出错，我的JS：

$(document).ready(function() {

//Get the necessary data from the JSON file
$.getJSON("categories.json", function(categories) {
    $.each(categories, function(c, category) {
        var link = new Nav(category.category);
    });
});

Nav = function(groups){
    $.each(groups, function(g, group) {
        //console.log(group);
        $('#categories').append('<li><a href="#">'+group.title+'</a></li>').data(group);
        $('#categories li a').on('click', function(){
            var builder = new Builder(group);
        });
        //$('#categories').append('<li><a href="#">'+this.title+'</a></li>');
        //$('#categories').append(
        //    $("<li/>", { id: links.id, text: links.title}).data('navver', links)
        //);

    });
};

Builder = function(builder){
    console.log(builder);
};

});

正如您所看到的，其他一些“尝试”被注释掉了。所以当我点击FIRST生成的链接时，我在console.log中得到了这个输出：

Object { id="1", title="Title 1", values=[1]}
Object { id="2", title="Title 2", values=[1]}
Object { id="3", title="Title 3", values=[1]}

这是整个数组，而不仅仅是第一项。当我点击第二个链接时：

Object { id="2", title="Title 2", values=[1]}
Object { id="3", title="Title 3", values=[1]}

当我点击第三个链接时：

Object { id="3", title="Title 3", values=[1]}

我想要发生的是，当我点击相应的链接时，会返回正确的对象。

他们手上有一些时间可以帮助我吗？

Answer 1

您应该替换绑定事件的以下行：

    $('#categories').append('<li><a href="#">'+group.title+'</a></li>').data(group);
    $('#categories li a').on('click', function(){
        var builder = new Builder(group);
    });

以下内容：

        var li = $('<li><a href="#">' + group.title + '</a></li>');
        $('#categories').append(li ).data(group);
        li.find('a').on('click', function() {
            var builder = new Builder(group);
        });

问题是，每次添加其中一个元素后，您都在使用选择器$('#categories li a')，因此添加的第一个<a>会使处理程序绑定三次，第二次和第三次绑定。

您可以使用此修改here找到修改后的代码版本。

Answer 2

啊，啊......它就在那里。这是因为你一次又一次地将事件绑定到所有li上。

Check out this fiddle

我唯一的改变就是这个。因此，click事件将绑定到新添加的li而不是所有li。

 $('#categories li:last a').on('click', function(){
            var builder = new Builder(group);
        });

$ .each + json +单击事件+对象输出

2 个答案: