javascript - 单击一次即可查看同一类中的所有元素

Question

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

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

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

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

Answer 1

您可以使用one方法:

Attach a handler to an event for the elements. The handler is executed at most once per element.

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

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

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

<小时/>

对于动态生成的元素，您应该委托(delegate)事件，尝试以下操作:

$(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')
     }
})