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