div内の複数のajax読み込まれた要素への変更と他のアクションへのバインド

Question

複数の入力、選択、およびテキストエリアを持つフォームがあります。

ロード時に、jQueryはすべての要素を見つけ出し、そのdata-attrをデフォルト値に設定し、変更イベントをバインドして変更をトリガーします。

問題は、一部の選択項目に他の入力値に基づいてajaxを再ロードすることです。

このコードを変更してajax読み込み要素を処理する簡単な方法はありますか？ 最初のdata-attr値を設定する必要がありますが、要素ごと（domに表示された後）に1回だけ変更をトリガーします。

これは元のコードです：私が知っている

$main_form.find('input, select, textarea').each(function(){ 
    $(this).attr('data-empty', 'true').off('change').on('change', function(){ 
     if ($(this).hasClass('number')) validate_int($(this)); 
     update_progress($(this)); 
    }).trigger('change'); 
}); 

があり、何かのように：

$main_form.on('change', 'input, select, textarea', function(){ 

}); 

しかし、それはすべての変更上のデータ-ATTRを結合すると、それはまた、無限の変化を誘発するだろう。また、.off('change')は本当に必要ではありませんが、私はちょうどそれを使用するために使用されています。

このコードをコピーしてajax done関数に追加することは望ましくありません。コードの重複を防ぎたいと思っています。それとも唯一の選択肢ですか？

。

ご不明な点がございましたら、ご意見をお寄せください。可能な限り正確な回答に更新します。

ありがとうございました。

Answer 1

私が正しく理解していれば、data-empty属性の初期値を設定し、ロードするたびに変更イベントをトリガーし、の将来のフォーム要素をロードします。

私はあなたがすべてのchangeイベント発生時に実行されなければならないコードの一部のイベントの委任を使用することを示唆している：

/** 
* Set initial value and trigger change event 
* @param $elem {jQuery object} The target element 
*/ 
function setInitialValue($elem) { 
    $elem.attr('data-empty', 'true').trigger('change'); 
} 

：

// This will affect all form element (including those loaded with ajax) 
$main_form.on('change', 'input, select, textarea', function(){ 
    if ($(this).hasClass('number')) validate_int($(this)); 
    update_progress($(this)); 
}); 

値の初期割り当てを実行する関数を作成します。

初期データ属性を設定し、すべてのAjax成功コールバックでchangeイベントをトリガーします。

success: function(data) { 
    var targetElement = $('select'); 
    targetElement .append(data); 
    setInitialValue(targetElement); 
} 

最後に、あなたは、すべてで初期状態にロード要素の変更イベントをトリガすることができます。

$(document).ready(function() { 
    $main_form.find('input, select, textarea').each(function(){ 
     setInitialValue($(this)); 
    }); 
});