0

jquery.js と jquery.tabs.js が含まれているインデックス ページがあります。このページは ajax を介してコンテンツを にロードします。コンテンツは一連のタブとそのコンテンツであり、ロードされたコンテンツの下部に tabs() の呼び出しがあります。FF では、インデックス ページを更新した後にコンテンツを読み込んだときにのみ機能し、リンクをクリックしてコンテンツをリロードすると、機能しなくなります。IEではまったく機能しません。

これらは私のタブです：

<ul id="horz-tabs">
 <li><a href="#tab1">tab1</a></li>
 <li><a href="#tab2">tab2</a></li>
 <li><a href="#tab3">tab3</a></li>
</ul>

次に、次のコンテナを用意し、ページの最後に ajax を介してロードしました。

<script type="text/javascript"><!--
 $('#horz-tabs a').tabs(); 
//--></script>

私のajax関数はページを適切にロードします。どうすればこの問題を解決できるのだろうと思っています。助けやアドバイスをありがとう。

ajax 読み込み関数は次のとおりです。

<script>

    function async(target, href) {          
    var loading = '<div class="loading">Loading</div>';  
      jQuery.ajax({
        url: href,
        beforeSend: function() {
            $(target).prepend(loading);
        },
        error: function() {
            $(target).html("<span class='error'>Failed</span>");
        },

        success: function(results) {
            $(target).html(results);
        }
    })
}

</script
4

1 に答える 1

0

ajax 経由でタブ html を読み込んでいるように見えますが、スクリプトが実行されているときにタブ要素の dom が存在しない可能性があるため、問題になる可能性があります。

したがって、非同期読み込みメソッドへの成功コールバックが必要であり$('#horz-tabs a').tabs();、読み込み成功コールバックに実行を追加する必要があります。

function async(target, href) {
    var loading = '<div class="loading">Loading</div>';
    return jQuery.ajax({
        url : href,
        beforeSend : function() {
            $(target).prepend(loading);
        },
        error : function() {
            $(target).html("<span class='error'>Failed</span>");
        },

        success : function(results) {
            $(target).html(results);
        }
    });
}

それで

async('some-div', 'tab-url').done(function(){
    $('#horz-tabs a').tabs(); 
})
于 2013-04-09T04:01:57.930 に答える