ajax가 추가 된 div에 jScrollPane 적용

Question

세 개의 개별 루프를 보여주는 탭 위젯이 있습니다. 기본적으로 숨겨진 세 번째 탭 섹션에서 아약스 검색 결과를 보여줍니다. 내 문제는 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에 기본적인 전화를 가지고 있지만 그것이 내가 생각 기본적으로 숨겨져 있기 때문에 그 문제의 사업부에 적용되지 않습니다.

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

그래서 어떻게 사업부에 jscroll가 비어있어 새로운 결과가 추가 될 때마다 적용 할 수 있는가?

Answer 1

맞습니다. jscrollpane은 표시되지 않은 콘텐츠에는 적용되지 않습니다 (표시 : 없음). 문제를 해결하려면 내용이 보류 될 때 jscrollpane을 호출하기 만하면됩니다.

따라서 $('#music-results').jScrollPane({showArrows: true,autoReinitialise: false});을 문서 준비()에 넣는 대신 $("#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을 사용하여 원하는 것을 수행하는 또 다른 방법이 있습니다. 당신이 # 음악-결과에 대한 내용을 추가 할 때, 단순히 스크롤을 다시 초기화, 그리고) (

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. 
    }); 

모든 기능을 사용할 수 있습니다 즉, API에 대한 전역 변수를 선언하고 그것에게 document.ready 설정 API를 사용하여. JScrollPane의이 높이를 계산해야하기 때문에

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

      }, 
     ); 

하지만 기억은이 작업을 수행하기 위해, 귀하의 콘텐츠를 볼 수 있어야하고이 표시되어 있지 않은 경우, 높이를 찾을 수 없습니다. 콘텐츠를 추가하고 탭이 표시되지 않으면 탭 스위치에서 jscrollpane을 다시 초기화하면됩니다.

희망이 도움이됩니다.