问题描述
当html5数字字段被更改时，我有一个触发compute（）函数的页面，我已经绑定了我可以想到的每一个事件，它适用于最初加载的DOM元素。
I have a page that trigger a calculate() function when a html5 number field is changed I have bound just about every event I can think of to it and it works for the originally loaded DOM elements.
但是，如果在加载dom后添加元素，则不会触发更改函数。
However, if I add elements after the dom is loaded the change functions do not trigger.
我添加了一个运行calculate（）函数的按钮，当单击它将运行新创建的元素以及原始元素。
I added a button that runs the calculate() function and when click it will run for the newly created elements as well as the original ones.
所以我知道代码的工作原理，但事件并没有触发新创建的dom元素。
So I know the code works but the event isn't firing for the newly created dom elements.
Jquery Triggers
Jquery Triggers
$('.score').change(function() {
calculate();
});
$('.score').bind('keyup mouseup', function() {
calculate();
});
$('.score').mousewheel(function() {
calculate();
});
$('.score').click(function() {
calculate();
});
$('.score').keypress(function() {
calculate();
});
计算功能
function calculate() {
$("tbody tr").each(function() {
row_total = 0;
$(".score", this).each(function() {
row_total += Number($(this).val());
});
$(".total", this).val(row_total);
});
var arr = [];
var row = 0;
$("tbody tr").each(function() {
$(".total", this).each(function() {
arr[row] = $(this).val();
row += 1;
});
});
var sorted = arr.slice().sort(function(a, b) {
return b - a
})
var ranks = arr.slice().map(function(v) {
return sorted.indexOf(v) + 1
});
row = 0;
$("tbody tr").each(function() {
$(".place", this).each(function() {
$(this).val(ranks[row]);
row += 1;
});
});
$("tbody tr").each(function() {
$(".place", this).each(function() {
var p = $(this).val();
switch (p) {
case '1':
$(this).css('background-color', 'gold');
break;
case '2':
$(this).css('background-color', 'silver');
break;
case '3':
$(this).css('background-color', '#8c7853');
break;
case '4':
$(this).css('background-color', 'white');
break;
default:
$(this).css('background-color', 'white');
}
});
});
}
genRow功能
function genRow(i)
{
var x = "";
for (var j = 0; j < i; j++) {
x += '<tr class="competitors">';
x += '<td class="row">';
x += '<input class="name" type="text" />';
x += '</td>';
x += '<td class="row">';
x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
x += '</td>';
x += '<td class="row">';
x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
x += '</td>';
x += '<td class="row">';
x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
x += '</td>';
x += '<td class="row">';
x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
x += '</td>';
x += '<td class="row">';
x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
x += '</td>';
x += '<td class="row">';
x += '<input class="total" type="text" value="0"/>';
x += '</td>';
x += '<td class="row">';
x += '<input class="place" type="text" value="0"/>';
x += '</td>';
x += '</tr>';
}
return x;
}
HTML代码
<body>
<table id="main">
<tr>
<td class="header">
Name
</td>
<td class="header judge">
Judge 1
</td>
<td class="header judge">
Judge 2
</td>
<td class="header judge">
Judge 3
</td>
<td class="header judge">
Judge 4
</td>
<td class="header judge">
Judge 5
</td>
<td class="header btn">
<input id="btn_Total" type="button" value="Total"/>
</td>
<td class="header h_place">
Place
</td>
</tr>
<tr class="competitors">
</tr>
<tr>
<td colspan="7"></td>
<td class="header btn">
<input id="btn_AddRow" type="button" value="Add Row"/>
</td>
</tr>
</table>
</body>
推荐答案
目前您正在使用的是直接绑定，只会附加到您的代码进行事件绑定调用时页面上存在的元素。
Currently what you are using is called a direct binding which will only attach to element that exist on the page at the time your code makes the event binding call.
您需要使用使用委托事件方法，动态生成元素或操纵选择器（如删除和添加类）。
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).
ie
$(document).on('event','selector',callback_function)
示例
$(document).on('click', '.score', function(){
//Your code
alert("clicked me");
});
代替文档静态容器。
这篇关于JQuery事件不触发DOM元素在页面加载后创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！