Question

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

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

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

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

Answer 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')
     }
})

Answer 2

这里有一个无限调用堆栈。你的AutoAdd会一次又一次地召唤自己......

Answer 3

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

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

on()实际上附加到表单（您将要更改选择器#the-form）并侦听从该表单的子项中冒出的事件。

单击同一类中的所有元素一次

3 个答案: