1

我正在尝试编写代码来自动将另一行添加到表单中。对于每个带有 lastName 类的表单输入，它应该只执行一次。

下面的代码有效。但它执行不止一次。我希望代码只为每个带有 lastName 类的表单输入执行一次。我对 jquery 和 javascript 没有经验，所以我不确定如何解决这个问题。

    function AutoAdd() {
    $('.lastName').focus(function(e){
    $('#add_new',pupils_form).parent().before(pupils_row);

    AutoAdd();
    });
    };
    AutoAdd();
4

3 回答 3

1

您可以使用以下one方法：

将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

$('.lastName').one('click', function(e){
      $('#add_new',pupils_form).parent().before(pupils_row);
});

此外，当您为输入绑定处理程序时，您可以将处理程序放在函数之外，请注意您的函数会调用自身并连续运行。如果要在页面加载时执行处理程序，可以触发事件：

$('.lastName').focus(function(e){
      $('#add_new',pupils_form).parent().before(pupils_row);
}).focus()

对于动态生成的元素，您应该委托事件，请尝试以下操作：

$(document).on('focus', '.lastName', function(){
     $('#add_new',pupils_form).parent().before(pupils_row);
})

您可以使用data-*属性，请尝试以下操作：

<input type='text' class='lastName' data-run='go'/>


$(document).on('focus', '.lastName', function(){
     if ( $(this).data('run') == 'go') {
           $('#add_new',pupils_form).parent().before(pupils_row);
           $(this).data('run', 'stop')
     }
})
于 2012-08-14T08:41:50.580 回答
0

你在这里有一个无限的调用堆栈。你的AutoAdd意志一次又一次地呼唤自己，然后......

于 2012-08-14T08:42:31.250 回答
0

为了避免AutoAdd在新创建的行上运行你的函数，你可以使用 jQuery 的on()-function 而不是focus()：

$('#the-form').on('focus', '.lastName', function () {
    $('#add_new',pupils_form).parent().before(pupils_row);
});

on()实际上附加到表单（您会想要更改选择器#the-form）并侦听从所述表单的子级冒出的事件。

于 2012-08-14T09:29:05.597 回答