0

我有一个显示三个单独循环的选项卡式小部件。在默认隐藏的第三个选项卡部分下，我显示了一个提供 ajax 结果的搜索。我的问题是我不知道如何将 jScrollPane 应用于结果的容器 div。每次输入搜索时，容器 div 都会被清空并附加新结果，因此我每次都需要重新应用它。这是我用来触发搜索的代码。

jQuery( function( $ ) {
// search filed
var $s = $( '#s' );
// the search form
var $sForm = $s.closest( 'form' );
console.log( $sForm );
$sForm.on( 'submit', function( event) {
    event.preventDefault();
    $.post(
        T5Ajax.ajaxurl,
        {
            action:     T6Ajax.action,
            search_term: $s.val()
        },
        function( response ) {
            $("#music-results").empty();
            $("#music-results").append( response );

        },
    );
 });
});

现在我有基本的调用来为其他循环设置jscrollpane，但这并没有应用于有问题的div，因为我猜它默认是隐藏的。

$(document).ready(function(){
  $('#music-results').jScrollPane({showArrows: true,autoReinitialise: false}); 
});

那么如何在每次清空 div 并添加新结果时将 jscroll 应用于 div 呢？

4

1 回答 1

0

没错，jscrollpane 不适用于未显示的内容（显示：无）。要解决您的问题，您只需在附加内容时调用 jscrollpane。

因此$('#music-results').jScrollPane({showArrows: true,autoReinitialise: false});，与其放入文档 ready()，不如简单地将其放在$("#music-results").append( response );. 然后它应该工作。

$.post(
        T5Ajax.ajaxurl,
        {
            action:     T6Ajax.action,
            search_term: $s.val()
        },
        function( response ) {
            $("#music-results").empty();
            $("#music-results").append( response );
            $('#music-results').jScrollPane({showArrows: true,autoReinitialise: false}); 

        },
    );

还有另一种使用api做你想做的事情的方法。为 api 声明一个全局变量，所有函数都可以使用该变量，然后将其设置为 document.ready()

var api;    
$(document).ready(function(){
      var element = $('##music-results').jScrollPane({showArrows: true,autoReinitialise: false});
      api = element.data('jsp'); //you can now access the api through this variable.
    });

然后，当您将内容附加到 #music-results 时，只需使用 api 重新初始化滚动窗格。

$.post(
            T5Ajax.ajaxurl,
            {
                action:     T6Ajax.action,
                search_term: $s.val()
            },
            function( response ) {
                $("#music-results").empty();
                $("#music-results").append( response );
                api.reinitialise();

            },
        );

但请记住，为了做到这一点，您的内容需要可见，因为 jscrollpane 需要计算高度，如果不显示，将找不到高度。因此，如果您附加内容并且选项卡不可见，只需在选项卡开关上重新初始化 jscrollpane。

希望这可以帮助。

于 2012-08-31T01:19:56.867 回答