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 回答