ajax/replacementの後にjsウィジェットを再バインドするベストプラクティス？

Question

私は自分で書いたカスタムjs/widgetを持つdjangoのウェブサイトを持っています。 JSコードのアイデア与えるために：私は、これはDjangoのウィジェットにコードをJSグルーフォームとコードにそれを結ぶ必要があるため

$(document).ready(function() { 
    $(".input_group_text_clear button").on("click", function (e) { 
     data_action = $(this).attr('data-action'); 
     data_target = $(this).attr('data-target'); 
     $.each(data_target.split(':'), function(i, target) { 
      $("#" + target).val("").trigger("change"); 
     }); 
     e.preventDefault(); 
    }); 
}); 

は今、これは非常にうまく機能したテンプレートに含まれています。

問題は、よくajaxを使用してフォームを投稿し、エラー/ブロックを含むレンダリングされたフォームがjson APIを介して返されることです。次に、フォーム要素をエラーを含むものに「置き換える」。

問題は、コントロールを再バインドする必要があることです。そうでなければ、コントロールは明らかに計画どおりに機能しません。私は通常、グローバル関数で "バインド"コードを抽出し、それをajax/doneハンドラから呼び出しますが、フォームにどのようなコントロールがあるのか​​を仮定する必要があるので、私は本当に好きではありません。そのような要素の置換のためのベストプラクティスは、バインディングのjs関数と組み合わせていますか？

ヘルプを大幅に ポール

Answer 1

はあなたが委任を使用する必要があり、高く評価されています。ボタン自体にクリックをバインドするのではなく、置換されない階層の上位の要素にバインドしてから、on()の呼び出しでselector引数を使用して、バインドする実際の要素を選択する必要があります。

ので、このHTML与えられた：

<div id="container"> 
    <form> 
    <div id="input_group_text_clear"> 
     <button>submit</button> 
    </div> 
    </div> 
</div> 

そして、あなたのAjaxは<form>内のすべてを置き換えると仮定すると、あなたのコードは次のようになります。そのコメントダニエルため

$("#container").on("click", ".input_group_text_clear button", function (e) { 
    ... 
});