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事件，这对于UX更好，并且更好地支持使用键盘导航网页的访问者。

Answer 2

这里有一个错误的连接：

'onclick="filter_based_o
^

只需添加一个空格和外翻工作。

＆＃13;

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>');
}

＆＃13;

<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>

＆＃13;

Answer 3

你刚刚错过了id周围的引号，以及onclick之前的一个空格。

工作示例：

＆＃13;

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>');
}

＆＃13;

<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>

＆＃13;

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>

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

4 个答案: