I've a table whose content is getting generated via an AJAX success response.

HTML code

<table class="table table-hover" id="table_content"></table>

AJAX code

$.ajax({
        dataType: "json",
        type : "POST",
        url: "/configuration/",
        data : { 'selected_item' : selected_item_id },

        success : function(result){
                 var table_heading = "<tr>"
                 var table_content = ""
                 for (var heads in result[1]){
                     table_heading +="<th style='background-color:#f1f1f1;'>" + result[1][heads] + "</th>"
                 }

                 for (var region in result[0]){
                      table_content += "<tr>"
                      for (var details in result[0][region]){
                          table_content += "<td>" + result[0][region][details] + "</td>"
                      }
                 }

                 table_content = table_heading + table_content

                 $("#table_content").html(table_content)
       },
});

I want to apply an onclick function to it. Like this:-

Onclick function code

$(function(){
    $('#table_content tr').click(function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

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.

What's the problem? Please sugggest.

EDITED

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 $('.test').slideUp(0) $(this).append(($('.test')).slideDown('slow')); does not works after the first time. Nor any error is popped . See /

I've a table whose content is getting generated via an AJAX success response.

HTML code

<table class="table table-hover" id="table_content"></table>

AJAX code

$.ajax({
        dataType: "json",
        type : "POST",
        url: "/configuration/",
        data : { 'selected_item' : selected_item_id },

        success : function(result){
                 var table_heading = "<tr>"
                 var table_content = ""
                 for (var heads in result[1]){
                     table_heading +="<th style='background-color:#f1f1f1;'>" + result[1][heads] + "</th>"
                 }

                 for (var region in result[0]){
                      table_content += "<tr>"
                      for (var details in result[0][region]){
                          table_content += "<td>" + result[0][region][details] + "</td>"
                      }
                 }

                 table_content = table_heading + table_content

                 $("#table_content").html(table_content)
       },
});

I want to apply an onclick function to it. Like this:-

Onclick function code

$(function(){
    $('#table_content tr').click(function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

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.

What's the problem? Please sugggest.

EDITED

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 $('.test').slideUp(0) $(this).append(($('.test')).slideDown('slow')); does not works after the first time. Nor any error is popped . See http://jsfiddle/fVz6D/5/

• javascript
• jquery
• html
• ajax

5 Answers 5

Updated: See working demo: http://jsfiddle/c5FgG/1/

Your problem was that you attached the test div element to a table row, which dissapeared after repopulating the table. Instead, clone the test div on each click when you are changing the table content, and use the clone instead the original.

Old answer: Add the onclick function code inside the ajax success function. It works out for me this way:

...
$("#table_content").html(table_content);

$('#table_content tr').click(function () {
  alert("Clicked");
  //your code
});
...

And don't forget to close the table rows with:

table_content += "</tr>";

The way you are using click to bind the event only binds the event to elements that are present in DOM at time the binding code is executed. You need event delegation for binding event with dynamically generated html elements using on().

$(function(){
    $('#table_content').on('click', 'tr', function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, reference.

Try

$(function(){
    $('#table_content').on('click', 'tr', function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

The on() handler should work on newly created elements too.

$(function(){
    $('#table_content').on('click', 'tr', function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

Here Is a list of fiddles :

fiddle1

fiddle2

fiddle3

fiddle4

You can use it as per your requirement.

Use on() for dynamically added elements like,

$('#table_content').on('click',' tr', function () {
    $('.test').slideUp(0)
    $(this).append(($('.test')).slideDown('slow'));
});

Updated your div will move to tr which you clicked, so when you click on list it will generate new content in table so your div.test will be removed from HTML, thats why you are not getting the desc div again.

To solve this problem you have to add div.desc again in clicking of list like,

if(!$('body > div.test').length){
   $("body").append('<div class="test">You slide down a row with content xyz</div>');
}

Full code

 $('#list').on('click', 'li', function () {
    var id = this.id;
    var table_content = "";
    // IF id=1,2,3,4,5 Code        

    $("#table_content").html(table_content);

    // add below code foe div.desc
    if (!$('body > div.test').length) {
        $("body").append('<div class="test">You slide down a row with content xyz</div>');
    }
});

Demo

Alternatively, you can use clone() like,

$(function () {
    $('#table_content').on('click', 'tr', function () {
        $clone=$('.test:not(.new-test)').clone();// clone the first test class element
        $('.new-test').remove();// remove the cloned elements
        $clone.addClass('new-test').appendTo('body');// add the clone to body
        $clone.slideUp(0);// playing with clone now
        $(this).append($clone.slideDown('slow'));
    });
});

Working demo