追加并折叠子行

Question

I want to append and collapse child row by clicking parent row, but it does not work. What should I do. Can anybody help??

This is my parent row:

$j(document).ready(function(){

$.ajax({
type: 'POST',
url:"scr1.php",

}).done(function(data){

for(var i=0; i<data.length; i++){

    var no = i+1;
    $table ="<tr class='row-parent'>";
    $table += "<td align='right'>"+no+ "</td>";
    $table += "<td  class='row-child'>"+data[i].uid+ "</td>";
    $table += "<td>"+data[i].document_id+ "</td>";
    $table += "<td>"+data[i].activity+ "</td>";
    $table += "<td>"+data[i].date_time+ "</td>";
    $table +="</tr>";

    $("#docLoc").append($table);
    }
    });
});

And this is my child row:

//child row
$(".row-parent").live("click",function(){

    var param = $(this).closest('tr').find('.row-child').text();//GET uid of row

    $.ajax({
        type: 'POST',
        url:"scr2.php",
        data:{ uid: param},
        //Link to history.php. Pass user_id to url
        }).done(function(data){

        for(var i=0; i<data.length; i++){
            alert(data[i].uid);
            var no = i+1;
            $table ="<tr>";
            $table += "<td align='right'>"+no+ "</td>";
            $table += "<td>"+data[i].uid+ "</td>";
            $table += "<td>"+data[i].document_id+ "</td>";
            $table += "<td>"+data[i].activity+ "</td>";
            $table += "<td>"+data[i].date+ "</td>";
            $table +="</tr>";

            $("#docLoc").append($table);
        }

    });
});

Did I miss out something??

Thanks in advance!!

Answer 1

If the object is dynamically produced, you will need to call use ".on" method on the parent (which always exists) and a ".enhanceWithin()" method on the parent after creating the child for it to respond to jQuery