применение jScrollPane к div, добавленному с помощью ajax

У меня есть виджет с вкладками, который показывает три отдельных цикла. В третьем разделе с вкладками, который по умолчанию скрыт, я показываю поиск, который дает результаты 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}); 
});

Итак, как я могу применять jscroll к div каждый раз, когда он очищается и добавляются новые результаты?


jscrollpane jquery-jscrollpane
person Pollux Khafra    schedule 28.08.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы правы, 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 на переключателе вкладок.

Надеюсь это поможет.

person VVV    schedule 31.08.2012