使用 jQuery 将事件绑定到具有 for 循环的多个元素

Binding events with jQuery to multiple elements with a for loop

本文关键字：循环 for 元素 jQuery 事件 绑定 使用      更新时间：2023-09-26

所以我正在研究这个问题，我需要在哪里生成元素，然后将事件绑定到它们。每次生成元素时，我都会取消绑定并使用 for 循环将事件重新绑定到生成的元素。这些函数似乎触发了，但它们得到了错误的索引（告诉代码要使用哪个元素）。

在jsFiddle http://jsfiddle.net/6UgYe/4/查看代码

任何解决这个问题的模块化都可以。也请随时评论我的代码。我去年写了大部分这篇文章，当时我刚刚开始使用javascript。

问候

阿克

编辑：这是

实际的解决方案：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 />')  
})
}

它使所有 ID 以".5"结尾的输入框将其 ID 和值附加到 #Errorfield 中，由 num_format() 函数处理。事件处理程序附加到#container内的所有输入框，即使它们是动态添加的。

并从点击处理程序中删除bindEmAll() #addTT;否则事件处理程序将被绑定到您单击addTT的次数，这使事情变得非常混乱;-）

$('#addTT').click(function() {
    addTT('#container');
});

在这里更新了小提琴。

出现问题是因为 blur 事件处理程序直到循环完成后才运行。 执行顺序为：

  • 将事件处理程序附加到项目 1 上的模糊事件
  • 将事件处理程序附加到项目 2 上的模糊事件

。过了一会儿...

  • 实际调用模糊事件
在

调用事件处理程序时，循环中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/

相关文章：