1

フォームに別の行を自動的に追加するコードを作成しようとしています。これは、クラスlastNameを使用して入力されたフォームごとに1回だけ実行する必要があります。

以下のコードは機能します。ただし、複数回実行されます。クラスlastNameを使用してフォーム入力ごとにコードを1回だけ実行する必要があります。私はjqueryとjavascriptに不慣れなので、この問題にどのように取り組むかがわかりません。

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

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

3 に答える 3

1

one次の方法を使用できます。

要素のイベントにハンドラーをアタッチします。ハンドラーは、要素ごとに最大1回実行されます。

$('.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新しく作成された行で関数を実行する必要がないようにするには、次のon()代わりに jQuery の -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 に答える