прилагане на 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 не се прилага за съдържание, което не се показва (display:none). За да коригирате проблема си, просто трябва да извикате 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