无法在单击复选框时触发 javascript 功能

Question

我有以下代码，它根据数组中的唯一值动态创建复选框。 触发功能不起作用，我不知道为什么。 我需要根据选中的复选框触发另一个功能。

 function onlyUnique(value, index, self) { return self.indexOf(value) === index; } function filter_based_on_selection(selected_box_id) { console.log("Selected option : "); console.log(selected_box_id); } array2 = ['Z1', 'Z1', 'Z2', 'Z3', 'Z3', 'Z4', 'Z4', 'Z4', 'Z5', 'Z5', 'Z5', 'Z6', 'Z7', 'Z7']; var unique_account_groups = array2.filter(onlyUnique); console.log("Unique Account Groups found : "); console.log(unique_account_groups); for (var prop in unique_account_groups) { jQuery("#filters").append('<div class="checkbox"><label><input class="list-group2-item" id= ' + unique_account_groups[prop] + 'onclick="filter_based_on_selection(this.id)" type="checkbox" value="">' + unique_account_groups[prop] + '</label></div>'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="filters"> <div class="list-group2"></div> </div>

Answer 1

您的代码的主要问题是因为您缺少id属性周围的结束引号，这导致它与onclick属性合并并弄乱了您的逻辑。 要解决此问题，您只需在正确的位置添加" 。

话虽如此，您真的不应该再使用on*事件属性了。 它们已经过时，不利于关注点分离。

相反，不显眼地附加您的事件处理程序。 由于您已经在页面中包含了 jQuery，您可以这样做：

 var array2 = ['Z1', 'Z1', 'Z2', 'Z3', 'Z3', 'Z4', 'Z4', 'Z4', 'Z5', 'Z5', 'Z5', 'Z6', 'Z7', 'Z7']; var html = array2.filter(function(v, i, a) { return a.indexOf(v) === i; }).map(function(item) { return `<div class="checkbox"><label><input class="list-group2-item" id="${item}" type="checkbox" value="">${item}</label></div>`; }); $('#filters').append(html).on('change', '.list-group2-item', function() { console.log('Selected option :', this.id); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="filters"> <div class="list-group2"></div> </div>

这里有几件事需要注意。 首先，我正在构建要附加一次的 HTML 字符串。 这提高了性能，因为它只需要 1 次 DOM 访问，而不是每个数组元素访问一次。 此外，它使用委托的事件处理程序，因此添加新复选框时无关紧要，相同的事件将应用于它们。 最后，它使用change事件而不是click事件，这对用户体验更好，并且对使用键盘浏览网络的访问者有更好的支持。

Answer 2

你在这里有一个错误的串联：

'onclick="filter_based_o
^

只需添加一个空间就可以了。

 function onlyUnique(value, index, self) { return self.indexOf(value) === index; } function filter_based_on_selection(selected_box_id) { console.log("Selected option : "); console.log(selected_box_id); } array2 = ['Z1', 'Z1', 'Z2', 'Z3', 'Z3', 'Z4', 'Z4', 'Z4', 'Z5', 'Z5', 'Z5', 'Z6', 'Z7', 'Z7']; var unique_account_groups = array2.filter(onlyUnique); console.log("Unique Account Groups found : "); console.log(unique_account_groups); for (var prop in unique_account_groups) { jQuery("#filters").append('<div class="checkbox"><label><input class="list-group2-item" id= ' + unique_account_groups[prop] + ' onclick="filter_based_on_selection(this.id)" type="checkbox" value="">' + unique_account_groups[prop] + '</label></div>'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="filters"> <div class="list-group2"></div> </div>

Answer 3

您只是错过了 id 周围的引号，以及 onclick 前的一个空格。

工作示例：

 function onlyUnique(value, index, self) { return self.indexOf(value) === index; } function filter_based_on_selection(selected_box_id) { console.log("Selected option : "); console.log(selected_box_id); } array2 = ['Z1', 'Z1', 'Z2', 'Z3', 'Z3', 'Z4', 'Z4', 'Z4', 'Z5', 'Z5', 'Z5', 'Z6', 'Z7', 'Z7']; var unique_account_groups = array2.filter(onlyUnique); console.log("Unique Account Groups found : "); console.log(unique_account_groups); for (var prop in unique_account_groups) { jQuery("#filters").append('<div class="checkbox"><label><input class="list-group2-item" id=" ' + unique_account_groups[prop] + '" onclick="filter_based_on_selection(this.id)" type="checkbox" value="">' + unique_account_groups[prop] + '</label></div>'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="filters"> <div class="list-group2"></div> </div>

Answer 4

连接和被遗忘的空间中存在错误，我设法通过更改最少的东西使其如下工作：

 function onlyUnique(value, index, self) { return self.indexOf(value) === index; } function filter_based_on_selection(selected_box_id) { console.log("Selected option :", selected_box_id); } array2 = ['Z1', 'Z1', 'Z2', 'Z3', 'Z3', 'Z4', 'Z4', 'Z4', 'Z5', 'Z5', 'Z5', 'Z6', 'Z7', 'Z7']; var unique_account_groups = array2.filter(onlyUnique); //console.log("Unique Account Groups found : ", unique_account_groups); for (var prop in unique_account_groups){ jQuery("#filters").append('<div class="checkbox"><label><input class="list-group2-item" id="' + unique_account_groups[prop] + '" onchange="filter_based_on_selection(this.id);" type="checkbox" value="">' + unique_account_groups[prop] + '</label></div>'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="filters"> <div class="list-group2"></div> </div>