[英]Binding events with jQuery to multiple elements with a for loop
所以我正在研究這個問題,我需要生成元素,然后將事件綁定到它們。 每次我生成一個元素時,我解除綁定並用for循環將事件重新綁定到生成的元素。 這些函數似乎觸發了,但它們得到了錯誤的索引(它告訴代碼使用哪個元素)。
查看jsFiddle http://jsfiddle.net/6UgYe/4/上的代碼
解決這個問題的任何模塊化都可以。 也可以隨意評論我的代碼。 我剛剛開始使用javascript時寫了大部分內容。
問候,
Akke
編輯:這是行動的解決方案: http : //jsfiddle.net/nwH8Z/3/它計算模糊的增值稅免費價格。
將bindEmAll
函數更改為如下所示 -
function bindEmAll()
{
$('#container').on('blur', 'input[id$=".5"]', function(){
$('#Errorfield').append('Current box is ' + this.id + '<br/>').append(num_format(this.value) + '<br />')
})
}
它使所有帶有以“.5”結尾的ID的輸入框將其由num_format()
函數處理的id和值附加到#Errorfield
。 事件處理程序附加到#container
所有輸入框,即使它們是動態添加的。
並刪除bindEmAll()
從你的點擊處理程序#addTT
; 否則事件處理程序將被綁定多次,因為你點擊addTT,這使得事情相當混亂;-)
$('#addTT').click(function() {
addTT('#container');
});
這里更新了小提琴。
問題正在發生,因為blur
事件處理程序直到循環結束后才運行。 執行順序是:
...一段時間之后...
在調用事件處理程序時,循環中變量i
的值已更改為最后一個值的索引,因此這是事件處理程序中使用的值。
要解決這個問題,您可以將代碼置於閉包中:
(function(i) {
$('#container input#box' + i + '\\.5').unbind();
$('#container input#box' + i + '\\.5').blur(function() {
//error processing function;
$('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
});
$('#container input#box' + i + '\\.5').blur(function() {
$('#container input#box' + i + '\\.5').val(num_format($('#container input#box' + i + '\\.5').val()));
$('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
});
})(i);
我在這里更新了你的小提琴
boxes = 1;
function num_format(input) {
//For demo purporses, we only parseInt()+5
ret = parseFloat(input) + 5;
return ret;
}
function addTT(parentElement, arg1, arg2, arg3, arg4, arg5) {
if (!arg1) {
arg1 = "";
}
if (!arg2) {
arg2 = "";
}
if (!arg3) {
arg3 = "";
}
if (!arg4) {
arg4 = "";
}
if (!arg5) {
arg5 = num_format((0.00).toFixed(2));
}
row = $('<tr></tr>').attr('id', boxes);
cell1 = $('<td class="inputcell"></td>');
cell2 = $('<td class="inputcell"></td>');
cell3 = $('<td class="inputcell"></td>');
cell4 = $('<td class="inputcell"></td>');
cell5 = $('<td class="inputcell"></td>');
input1 = $('<input></input>').attr('style', 'width:100px;').attr('id', 'box' + boxes + '.1').attr('name', 'box' + boxes + '_1').attr('type', 'text').attr('value', arg1);
input2 = $('<input></input>').attr('style', 'width:100px;').attr('id', 'box' + boxes + '.2').attr('name', 'box' + boxes + '_2').attr('type', 'text').attr('value', arg2);
input3 = $('<input></input>').attr('style', 'width:93px;').attr('id', 'box' + boxes + '.3').attr('name', 'box' + boxes + '_3').attr('type', 'text').attr('value', arg3);
input4 = $('<input></input>').attr('style', 'width:149px;').attr('id', 'box' + boxes + '.4').attr('name', 'box' + boxes + '_4').attr('type', 'text').attr('value', arg4);
input5 = $('<input></input>').attr('style', 'width:90px;').attr('id', 'box' + boxes + '.5').attr('name', 'box' + boxes + '_5').attr('type', 'text').attr('value', arg5);
$(cell1).append(input1);
$(cell2).append(input2);
$(cell3).append(input3);
$(cell4).append(input4);
$(cell5).append(input5);
$(row).append(cell1);
$(row).append(cell2);
$(row).append(cell3);
$(row).append(cell4);
$(row).append(cell5);
$('#tBoxes').append(row);
boxes++;
}
function subTT(parentElement) {
boxes = boxes - 1;
$(parentElement + ' #' + boxes).hide(0, function () {
$(parentElement + ' #' + boxes).remove();
}
);
}
function bindEmAll() {
alert(boxes);
for (var i = 1; i <= boxes - 1; i++) {
$('#container input#box' + i + '\\.5').blur(function () {
alert($(this).val());
$(this).val(num_format($(this).val()));
//$('#container input#box' + i + '\\.5').val(num_format($('#container input#box' + i + '\\.5').val()));
//$('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
});
}
}
$('#addTT').click(function () {
addTT('#container');
bindEmAll();
});
$('#subTT').click(function () {
subTT('#container');
});
$(function () { addTT('#container'); bindEmAll(); });
以下是添加新元素並處理其事件的一個小示例:
<button id="add">+</button>
<button id="remove">-</button>
<div id="holder">
</div>
。
$('#add').on('click', function () {
$('#holder').append('<p>click me!</p>');
});
$('#remove').on('click', function () {
$('#holder p:last-of-type').remove();
});
$('#holder').on('click', 'p', function () {
alert('my id is: ' + $('#holder p').index(this));
});
你可以在這里查看: http : //jsfiddle.net/simo/PyKDz/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.