如何在jQuery中的面板中追加行？

Question

can you please tell me how to append row in panel which is collapsible row (can be expand),I am able to append but it s not expand.

I am getting this error while doing this step. First click icon on << it open the left panel .Then I click add button it generate a row as well as it generate submenu of firstLevel.Then press + button it expand .but when you click add button again it generate another row and submenu but it is not expandable while click on + button?
http://jsfiddle.net/eHded/1549/

function addInmenu(id){
 alert(id)   
     var menuid="menu_"+id;
    // var data = $('#menuId li').html();
 $('#menuId  li').append('<ul><li id=' + menuid + '><a>'+menuid+'</a></li></ul>');
     $('.tree li').each(function () {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }
    });
$('.tree li.parent > a').on('click',function () {
    //alert('--')
        $(this).parent().toggleClass('active');
        $(this).parent().children('ul').slideToggle('fast');
    });

}

Answer 1

Here is your code working in jsfiddle

function addInmenu(id){ 
   var menuid="menu_"+id;
   // var data = $('#menuId li').html();

   $('#menuId li:first ').append('<ul><li id=' + menuid + '><a>'+menuid+'</a></li> </ul>');
   $('.tree li').each(function () {
     if ($(this).children('ul').length > 0) {
        $(this).addClass('parent');
     }
   });
   $('.tree li.parent > a').unbind("click");
   $('.tree li.parent > a').on('click',function () {
   //alert('--')
    $(this).parent().toggleClass('active');
    $(this).parent().children('ul').slideToggle('fast');
   });
}


$('#add').click(function () {
  var listItems = $("#ultest").children();
  var id;
  if (typeof ($("#ultest li:last").attr('id')) == 'undefined') {
    //alert('undefint');
    id = "tc_1"
  } else {
    id = $("#ultest li:last").attr('id');
    var index = id.indexOf("_");
    var count = id.substring(index + 1, id.length)
    count = parseInt(count);


    id = id.substring(0, index) + "_" + parseInt(count + 1);
   // alert(id)
  }

  if ($('.tree li.parent').hasClass('active')){        
    $('.tree li.parent').toggleClass('active');
    $('.tree li.parent').children('ul').slideToggle('fast');
  }
  $('#ultest').append('<li id=' + id + '><a href="#" class="foo">' + id + '</a></li>');
    //$('#ultest').listview('refresh');
    addInmenu(id);
});

UPDATED:

here is updated fiddle for reference jsfiddle here