javascript - slideUp() and slideDown() not working inside .delegate() -

i developing website using jqm. have dynamically created collapsible via ajax data. now, want make collapsible slideup , down smoothly (jquery mobile). problem .delegate function getting executed, using default sliding speed , not changing. code :

$('#search-page').delegate('.menu-collapse','expand', function (event) {       $(this).children().slidedown(300);   }).delegate('.menu-collapse','collapse', function (event) {     $(this).children().next().slideup(300);       event.stoppropagation(); }); 

i think problem $(this). can sort out ? in advance.

try , thats work want now

$(document).on('pageinit',function(event){     $('[data-role="collapsible"]').bind('expand', function (event) {          $(this).find('.ui-collapsible-content')                .css('display','none')                .slidedown(300, function(){                   $(this).css('display','block');                 });      }).bind('collapse', function (event) {           $(this).find('.ui-collapsible-content.ui-collapsible-content-collapsed')               .slideup(300);         }); }); 

fiddle here