1

我真的希望这没有一个简单的解释，因为这将意味着很多很多时间的损失（尽管这不会改变他们已经丢失的事实。）一些帮助或朝着正确的方向踢会成为最后期限的节省者。请。

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

1.）创建一个由 JSON 文件填充的链接列表（有效）
2.）在每个 li 或 a 上绑定一个单击事件，将类别对象传递给构建器函数（认为这有效）
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);
};

});

正如你所看到的，还有一些其他的“尝试”被注释掉了。所以当我点击第一个生成的链接时，我会在 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]}

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

是否有任何聪明的家伙有一些时间可以帮助我？

4

2 回答 2

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>添加的处理程序绑定了三次，第二次绑定了两次，第三次绑定了第三次。

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

于 2012-10-25T22:09:00.873 回答
0

啊……就是这样。这是因为您将事件多次绑定到所有 li 一遍又一遍。

看看这个小提琴

我唯一的改变就是这个。所以点击事件被绑定到新添加的 li 而不是全部。

 $('#categories li:last a').on('click', function(){
            var builder = new Builder(group);
        });
于 2012-10-25T22:08:31.703 回答