Question

我有一个索引页面，我有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

Answer 1

看起来你正在通过ajax加载tab html，这可能是问题，因为当你的脚本运行时，tab元素的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(); 
})

在通过ajax加载内容后，jquery选项卡不会触发

1 个答案: