Question

我遇到一个问题，当我通过Ajax调用将数据加载到容器中时会出现jScrollPane，但是当我尝试进行第二次调用时数据会消失（通过单击地图的不同部分将数据加载到容器中）。我尝试重新初始化jScrollPane但没有运气。关于问题可能是什么的任何想法？以下是源代码，您将看到一个注释掉的部分。注释掉的部分和对jScrollPane的api引用似乎都以相同的方式运行，但两者都无法使滚动条重新初始化。

function getMapData(){
    joinedStatesSelected = mapSelectedArrayForQuery.join();
    var url = 'loc='+joinedStatesSelected+'';
        alert(url);
    ajaxMapRequest = $.ajax({
        type: "GET",
        url: "../../availabilities/maps?"+url,
        datatype: "html",
        success: function(x){
            $('#temporaryMapDirection').remove();
            $('.map-right-container').html(x);

            /*
            $('.map-right-container').jScrollPane({
                autoReinitialise:true,
                autoReinitialiseDelay:100,
                maintainPosition: false,
                hideFocus: true
                });
            */

            var mapContent = $('.map-right-container').jScrollPane();
            var api = mapContent.data('jsp');

            api.reinitialise();


            mapPropertyCount();

        },
        error: function() {
            console.log('failed');
        }
    });
}

Answer 1

出现此问题是因为您更新了包含html的元素的jScrollPane。因此，您只需要更新包含滚动窗格的元素的内容，然后调用reinitialise。

http://jsfiddle.net/3yDX9/

在你的情况下，你应该写一些像，

$('.map-right-container div.content').html(x);

但是，如果确实需要设置html，就像在示例中所做的那样，在设置html内容之前需要destroy jScrollPane，然后再次创建它。

http://jsfiddle.net/Jx5eJ/

在你的情况下，它会像，

....

var pane = $('.map-right-container')
    var api = pane.data('jsp');
    api.destroy();

$('.map-right-container').html(x);

/*
$('.map-right-container').jScrollPane({
  autoReinitialise:true,
  autoReinitialiseDelay:100,
  maintainPosition: false,
  hideFocus: true
});
*/

/*var mapContent = $('.map-right-container').jScrollPane();
var api = mapContent.data('jsp');

api.reinitialise();*/

 $('.map-right-container').jScrollPane();

mapPropertyCount();
....

AJAX调用后，jScrollPane消失了

1 个答案: