Databases
StackOverflow2013
Postsdbo
POTable onclick rows jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTable onclick rows jQuery
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload