title: Table onclick rows jQuery
body: <p>I've a table whose content is getting generated via an AJAX success response.</p>
  
  <p><strong>HTML code</strong></p>
  
  <pre><code>&lt;table class="table table-hover" id="table_content"&gt;&lt;/table&gt;
  </code></pre>
  
  <p><strong>AJAX code</strong></p>
  
  <pre><code>$.ajax({
          dataType: "json",
          type : "POST",
          url: "/configuration/",
          data : { 'selected_item' : selected_item_id },
  
          success : function(result){
                   var table_heading = "&lt;tr&gt;"
                   var table_content = ""
                   for (var heads in result[1]){
                       table_heading +="&lt;th style='background-color:#f1f1f1;'&gt;" + result[1][heads] + "&lt;/th&gt;"
                   }
  
                   for (var region in result[0]){
                        table_content += "&lt;tr&gt;"
                        for (var details in result[0][region]){
                            table_content += "&lt;td&gt;" + result[0][region][details] + "&lt;/td&gt;"
                        }
                   }
  
                   table_content = table_heading + table_content
  
                   $("#table_content").html(table_content)
         },
  });
  </code></pre>
  
  <p>I want to apply an onclick function to it. Like this:- </p>
  
  <p><strong>Onclick function code</strong></p>
  
  <pre><code>$(function(){
      $('#table_content tr').click(function () {
          $('.test').slideUp(0)
          $(this).append(($('.test')).slideDown('slow'));
      });
  });
  </code></pre>
  
  <p>The issue that I'm facing is that I'm not able to click the row, if I generate the content via AJAX response. If I create a table inside the HTML itself, it'll work, but not when the table is created via AJAX response.</p>
  
  <p>What's the problem? Please sugggest.</p>
  
  <p><strong>EDITED</strong></p>
  
  <p>What I'm trying to achieve is that a div should be slide down just below the row upon clicking the row. I does works for the first time when the data gets generated via AJAX. but it does not works when I'm generating data after the first time, though the event is triggered but <code>$('.test').slideUp(0) $(this).append(($('.test')).slideDown('slow'));</code> does not works after the first time. Nor any error is popped . See <a href="http://jsfiddle.net/fVz6D/5/" rel="nofollow">http://jsfiddle.net/fVz6D/5/</a></p>