JScrollpane не работает после ajax

Question

Итак, после загрузки некоторого контента в div я хотел инициализировать jscrollpane, но он просто не сработает. Вот мой код. Посмотрите, можете ли вы сказать мне, что не так.

Ajax (JQuery)

$("#mision").click(function() { 
     var id = this.id; 
     $.ajax({ 
      url: template + "/acciones.php", 
      type: "POST", 
      data: "id=" + id, 

      complete: function() { 

      }, 

      success: function(x) { 
      $("#cargaContenido").html(x); 
       $("#scrollpro").css({'height':(($(window).height())-361)+'px'}); 
     $('#scrollpro').jScrollPane({ 

     }); 

     $(window).resize(function(){ 
      $('#scrollpro').css({'height':(($(window).height())-301)+'px'}); 
      $('#scrollpro').jScrollPane({autoReinitialise: true}); 
     }); 
       $("#scrollpro").trigger('resize'); 

     }, 

      error: function() { 
      //called when there is an error 
      }, 
     }); 

    }); 

Это делает работу сейчас

Answer 1

Попробуйте это:

$("#mision").click(function() { 
    var id = this.id; 
    $.ajax({ 
     url: template + "/acciones.php", 
     type: "POST", 
     data: "id=" + id, 

     complete: function() { 
     $('#cargaContenido').jScrollPane().fadeIn(); 
     }, 

     success: function(x) { 
     $("#cargaContenido").html(x); 

    }, 

     error: function() { 
     //called when there is an error 
     }, 
    }); 

}); 

Answer 2

Это может иметь что-то делать с анимацией FadeIn. Я не думаю, что jScrollPane может измерять контент во время его анимации. По крайней мере, это моя догадка.

Попробуйте вместо этого:

$("#cargaContenido").html(x).fadeIn(500, function() { 
    //Callback when the fadeIn is complete 
    $('#cargaContenido').jScrollPane(); 
});