Question

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.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>

And I want to alert when i clicked the testB button

   $('.testB').click(function(){                                                                                                                               
       alert("ok");                                                                                                                                            
   });     
Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top