.onセレクタのワイルドカードを使用して動的に生成されたフィールドにjqueryをバインドします。

Question

私は、ユーザ入力に基づいてフィールドをレンダリングする動的に生成されたフォームを持っています。私は、DOMが最初にレンダリングされたときに存在しないので、動的に生成されたフィールドにイベントを直接バインドすることはできません。 「document.Thisが動作するようにするので、親要素を通してイベントをバインドする.on」メソッド 『.onは』セレクタを受け入れる子要素を選択し、」しかし、私は私が渡すことができます私のテストでは

.on(events [, selector ] [, data ], handler) 

をjQueryのを使用することができます静的セレクタに入れて、イベントを正常にバインドします。

$(document).on('click','#id_task_size_edit',function(){ 
//  $('#id_task_amount').prop('disabled',false).css("background-color","#FFFACD"); 

問題は、各フィールドのIDはまた、動的に生成されていることであるとid_task_size_edit_1、id_task_size_edit_2、およびid_task_amount_1などのように見える。しかしながら

私はすべてのイベントをキャッチするセレクタにワイルドカードを使用することができると考えましたid_task_size_editで始まるように

$(document).on('click',"'input[id^=id_task_size_edit]'",function(){ 

しかし、これは動作しません。私はまた、[入力*]の有無にかかわらず、[id * = id_task_size_edit]を試してみましたが、シンタックスとワイルドカードの組み合わせは何もありませんが、何も動作していないようです。私は何か不足しているか、またはワイルドカードをjquerys .on関数のselectorフィールドに渡すことはできません。

動的に生成されたIDを使用して動的に生成されたフィールドにバインディングイベントを達成するにはどうすればよいですか？

Answer 1

だけ'[id^="id_task_size_edit"]'で"'input[id^=id_task_size_edit]'"を交換してください。以下の作業例。

$(document).on('click', '[id^="id_task_size_edit"]', function() { 
 
    $(this).text("It is working!"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="id_task_size_edit_1" type="button">Click Me</button>

Answer 2

代わりのID、彼らに共通classを与え、そしてあなたのjQueryの中でそれを使用します。

$(document).on('click','.some_common_class_name',function(){