0

3 つの別々のループを表示するタブ付きウィジェットがあります。デフォルトで非表示になっている 3 番目のタブ付きセクションの下に、ajax の結果が得られる検索を表示します。私の問題は、結果のコンテナー div に jScrollPane を適用する方法がわからないことです。検索が入力されるたびに、コンテナー 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

そうです、表示されていないコンテンツ (display:none) には 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 に答える