开发者

How to reach an id or class after we used jQuery's replaceWith function?

Curently I'm developing a prpject with django, and one of my view fills a table via ajax call and replaceWith function. The strange thing is, my html source doesn't change however i can see all table contents from chrome's inspect argument thing. And when i want to get an id or class from the generated content, jQuery can't find anything.

So am i using replaceWith in a wrong way ? and how can i select elements from newly generated content ?

Here is the code :

Jquery Part

   $('#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);                                                                                            
             }                                                                                                                                                 
    });

Generating The Content

  {% for entity in entities %}                                                                                                                                           
    <tr>                                                                                                                                                               
       <td>                                                                                                                                                            
         <input type="checkbox" name="entity_selection" />                                                                                                             
       </td>                                                                                                                                                           
       <td>{{entity.pk}}</td>                                                                                                                                          
       <td><input type="text" value="{{entity.ge开发者_JS百科t_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>

And I want to alert when i clicked the testB button

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


Since you are replacing contents via ajax $('.testB').click() will not work as I assume you are registering that event handler in document ready or something similar. Creating an event handler relies on the element being present on the dom at the time of registratoin. If you want to attach an event handler to an element that has yet to be appended to the dom look at using either .live() or .delegate()

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

becomes

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

Here is an example on jsfiddle that describes all three scenarios.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜