動態列表的最後一個按鈕並不總是觸發點擊事件與jQuery

Question

我有一個簡單的div，我動態地追加按鈕，現在除了列表中的最後一個元素，所有的按鈕點擊事件都會觸發它沒有。如果我點擊按鈕中的左側或右側圖標，它的工作原理很好，如果我點擊文本或按鈕的中間位置，有時它會觸發，但有時它不會。

<div id="btn-list"></div> 

在我的DOM後，頁面加載加載我追加按鈕的隨機數，我的上click事件監聽器添加到按鈕。

$(function() { 
    for (var i=0;i<arr.length;i++) { 
    var item = arr[i]; 
    var btn = $(document.createElement('button')); 
    btn.text(item['description']); 
    btn.attr('id', i); 
    $("#btn-list").append(btn); 
    } 

    $('#btn-list').on('click', 'button', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    window.location.replace('blah.html'); 
    }); 
} 

我正在使用jQuery 2.0。

Answer 1

沒有額外的代碼，這段代碼不應該失敗。請記住，添加的最後一個按鈕的引用保存在btn中，因此如果在代碼的某個其他部分修改了元素或其事件，它將會改變預期的行爲。

您是否添加了一些調試輸出以確認點擊事件未被觸發？ http://jsfiddle.net/AstDerek/gKJNe/

$('#btn-list').on('click', 'button', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    alert('blah.html'); 
}) 

增加了一個簡單的測試，它不會在我測試瀏覽器，也許它僅限於瀏覽器失敗？ http://jsfiddle.net/AstDerek/gKJNe/1/

現在，如果將按鈕創建封裝到自己的函數中會發生什麼？

function create_button (index,properties) { 
    var btn = $(document.createElement('button')); 

    btn.text(properties.description); 
    btn.attr('id',index); 
    $("#btn-list").append(btn); 

    return btn; 
} 

for (var i=0;i<arr.length;i++) { 
    create_button(i,arr[i]); 
} 

最後，就像解決方法一樣，爲什麼不在最後一步添加隱藏按鈕？

for (var i=0;i<arr.length;i++) { 
    create_button(i,arr[i]); 
} 

create_button(-1,{description:''}).hide();