創建點擊監聽for循環的每個元素

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名稱放置一個click監聽器。

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