Question

HTML

<ol id="cat-list"></ol>
<div id="cat">
    <h2 id="cat-name"></h2>
    <div id="cat-count"></div>
    <img id="cat-img" src="">
</div>

Javascript文件

var cats = [{
    name: 'Meebo',
    clickCount: 0,
    imgSrc: 'https://www.flickr.com/photos/junku/12752007/in/album-  303691/'
}, {
    name: 'Mrs. B',
    clickCount: 0,
    imgSrc: 'https://www.flickr.com/photos/junku/12752033/in/album-303691/'
}]

var f = function () {

    for(var i = 0; i < cats.length; i++) {
        var cat = cats[i];
        $('#cat-list').append('<li>' + cat.name + '</li>');
        $('li').on('click', function () { // Two alerts for first cat?
            alert('hello');
        });
    }
}
f();

我想要实现的是当用户点击任一猫牌名称时，会发出一个警报。但是当点击第一只猫时，它会触发两个警报。我可以理解为什么，但没有解决方案。我的代码试图做的是为for循环中的两个cat名称设置一个单击监听器。

JSFIDDLE

Answer 1

这里的问题是绑定事件时事件绑定到DOM中存在的所有li元素。

使用event delegation

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$('#cat-list').on('click', 'li', function() {
    console.log('Hello');
});

这里有完整的代码：

var cats = [{
    name: 'Meebo',
    clickCount: 0,
    imgSrc: 'https://www.flickr.com/photos/junku/12752007/in/album-  303691/'
}, {
    name: 'Mrs. B',
    clickCount: 0,
    imgSrc: 'https://www.flickr.com/photos/junku/12752033/in/album-303691/'
}];

$('#cat-list').on('click', 'li', function () {
    console.log('Hello');
});

var f = function () {
    for(var i = 0, len = cats.length; i < len; i++) {
        $('#cat-list').append('<li>' + cats[i].name + '</li>');
    }
};
f();

Updated fiddle

为每个元素

1 个答案: