jquery - jQuery の replaceWith 関数を使用した後、ID またはクラスに到達する方法は?

Question

現在、私はdjangoでプロジェクトを開発しています。私のビューの1つは、ajax呼び出しとreplaceWith関数を介してテーブルを埋めます。奇妙なことに、html ソースは変更されませんが、chrome の引数の検査からすべてのテーブルの内容を確認できます。そして、生成されたコンテンツから ID またはクラスを取得したい場合、jQuery は何も見つけられません。

だから私は間違った方法でreplaceWithを使用していますか? また、新しく生成されたコンテンツから要素を選択するにはどうすればよいですか?

コードは次のとおりです。

Jquery部分

   $('#channel_selector').change(function(event)                                                                                                               
   {                                                                                                                                                           
       event.preventDefault();                                                                                                                                 
       var selected_channel = $('#channel_selector').val();                                                                                                    
       deneme(selected_channel);                                                                                                                               
   });                                                                                                                                                         

   function deneme(d){                                                                                                                                         
       $.ajax({                                                                                                                                                
             type:"POST",                                                                                                                                      
             url:"/wsp/proginfo/",                                                                                                                       
             data:d,                                                                                                                                           
             dataType:'text',                                                                                                                                  
             success: function(msg){                                                                                                                           
               var entity_table = $(msg).find("#program_table tbody").html();                                                                                  
               entity_table = "<tbody>" + entity_table + "</tbody>";                                                                                           
               $("#program_table tbody").replaceWith(entity_table);                                                                                            
             }                                                                                                                                                 
    });

コンテンツの生成

  {% for entity in entities %}                                                                                                                                           
    <tr>                                                                                                                                                               
       <td>                                                                                                                                                            
         <input type="checkbox" name="entity_selection" />                                                                                                             
       </td>                                                                                                                                                           
       <td>{{entity.pk}}</td>                                                                                                                                          
       <td><input type="text" value="{{entity.get_name}}" /></td>                                                                                                      
       <td><input type="text" value="{{entity.get_productionYear}}" /></td>                                                                                            
       <td><input type="text" value="{{entity.get_director}}" /></td>                                                                                                  
       <td><input type="text" value="{{entity.get_cast}}" /></td>                                                                                                      
       <td><input type="text" vaue="blah"/></td>                                                                                                                       
       <td><input type="text" value="{{entity.get_ProgramDetail}}"></td>                                                                                               
       <td>                                                                                                                                                            
           <input type="submit" class="testB" value="Yeni Bölüm"/>                                                                                                     
       </td>

そして、testBボタンをクリックしたときに警告したい

   $('.testB').click(function(){                                                                                                                               
       alert("ok");                                                                                                                                            
   });     

Answer 1

ajax を介してコンテンツを置き換えているため$('.testB').click()、そのイベント ハンドラーをドキュメント準備完了または同様のものに登録していると想定しているため、機能しません。イベント ハンドラーの作成は、登録時に DOM に存在する要素に依存します。DOMにまだ追加されていない要素にイベント ハンドラーを追加する場合は、.live()または.delegate()のいずれかを使用して見てください。

$('.testB').click(function(){                                                                                                                               
       alert("ok");                                                                                                                                            
});

になる

$('.testB').live('click', function(){                                                                                                                               
       alert("ok");                                                                                                                                            
});

3 つのシナリオすべてを説明するjsfiddleの例を次に示します。