使用混乱的查询(HTML表)从JSONurl添加数据

Question

简短描述：

01)我将数据从JSON url动态加载到HTML表中。脚本位于HTML文件头中调用的外部.js文件中。

02)我使用页面顶部第一列(NAME)的筛选器来筛选结果。如果我将脚本包含在<script>标记下的HTML文件中，脚本就会工作，但当我将所有函数放在外部.js文件中时，脚本就不工作了。

链接如下所示：链接

JS脚本在这里：

//It loads the data from the JSON file 
$.getJSON(
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
function(data){
var tr;
//It loads data from the JSON file to the table
$.each (data, function (key, val) {
tr = $('<tr/>');
tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
tr.append('<td >' + 'TEST' + '</td>');
tr.append('<td class="metric2" >' + val.id + '</td>');
tr.append('<td class="metric3"><span class="multTotal">' +'0.00'+ '</span></td>');
tr.append('<td class="metric3-100"><span class="metric3-100">' +'0.00'+ '</span></td>');
tr.append('<td class="metric1-100"><span class="metric1-100">' +'0.00'+ '</span></td>');
$('table').append(tr);
});
});
//The filter function for the first column (NAME)
$("input:checkbox").click(function filters() {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var dimension1= $(this).attr('rel');
var value = $(this).val();            
$('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
});
$('body').on('input', 'input:checkbox', filters);

Answer 1

关于filter函数，您在.click(function filter() { ... });中命名了该函数，并且在尝试在$('body').on('input', 'input:checkbox', filters);中的".click"之外使用后

我认为你必须做一些类似的事情

function filters(){ ... };
$("input:checkbox").click( filters );
$('body').on('input', 'input:checkbox', filters);

或者更好的是，你不需要使用.click，只需尝试这样使用：

$('body').on('click', 'input:checkbox', function(){
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var dimension1= $(this).attr('rel');
var value = $(this).val();            
$('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
});

这样，您将在body上存在的每个input:checkbox上附加单击事件，并将附加到新的输入上。