Question

我有一个标签小部件，显示三个独立的循环。在默认情况下隐藏的第三个选项卡式部分下，我显示了一个给出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？

Answer 1

你是对的，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。

希望这会有所帮助。

将jScrollPane应用于附加ajax的div

1 个答案: