當JavaScript生成的複選框發生變化時運行函數

Question

我正在創建一個網頁，並根據CSV文件在該網頁中填充值。

根據CSV文件中的列數，我想要使用這些值生成複選框列表。我有工作：

function updateKey() { 
    var key = ''; 
    for (var item in data[0]) 
    { 
     key += '<input type="checkbox" name="' + item + '" value="' + item +'"> ' 
     key += item + "<br>\r\n" 
    } 
    document.getElementById('key').innerHTML = key 
} 

現在我想，當用戶檢查這些複選框，並基於該運行的功能檢測。例如，假設我只想顯示CSV文件中被檢查的行。我需要聽取複選框的狀態才能更改，然後計算檢查哪些複選框，然後相應地更新HTML。

我一直在尋找的計算器，發現這樣的功能：

var selected = []; 
$('#key input[type="checkbox"]:checked').each(function() { 
    selected.push($(this).attr('name')); 
}); 

但是，它似乎沒有觸發，當我檢查框。我在push函數後面添加了一個警告窗口，似乎沒有任何事情發生。是否因爲這些複選框是在頁面加載後生成的？有沒有辦法傾聽這些動態創建的複選框？

Answer 1

什麼你要找的是一個簡單的事件綁定。

您可能會遇到的唯一一個小問題是您的元素是動態創建的，所以您必須在創建時分別爲每個元素添加一個事件（不要這樣做）或你可以使用所謂的Event Delegation。

與其將事件綁定到元素本身，我們只是在其容器中放置一個偵聽器。這一位聽衆將處理所有的複選框。

一個基本的例子可能如下：

$("#key").on('change', 'input[type=checkbox]', function() { 
 
    var selected = []; 
 
    $('#key input[type="checkbox"]:checked').each(function() { 
 
     selected.push($(this).attr('name')); 
 
    }); 
 
    console.log(selected); 
 
}) 
 

 
$("#key").append("<input type='checkbox' name='check1'>"); 
 
$("#key").append("<input type='checkbox' name='check2'>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Check the boxes below. 
 

 
<div id="key"></div>

Answer 2

看看.on（）函數。您必須在添加更改事件後將其綁定到所有生成的複選框。您發佈的示例只會在您單獨調用它時觸發（在按鈕處理程序或其他東西上）。

例子：

var selected = []; 

function updateKey() { 
    var key = ''; 
    for (var item in data[0]) 
    { 
     key += '<input type="checkbox" name="' + item + '" value="' + item +'">' 
     key += item + "<br>\r\n" 
    } 
    document.getElementById('key').innerHTML = key 

    $('#key input[type="checkbox"]').change(function() { 
     // your stuff 
    }); 
} 

的變化處理程序的更多信息：How to handle change of checkbox using jQuery?