JScrollpane wont work after ajax

Question

So after I load some content on my div I wanted to initialize jscrollpane, but it just won't work. Here's my code. See if you guys can tell me what is wrong.

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
          },
        });

    });

It does work now!

Answer 1

Try this:

$("#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
      },
    });

});