Question

虽然他们有很多关于通过加载方法重新加载jQueryUI选项卡的帖子，但我似乎无法在1.9+中使用它。我希望我能看到一种方法来显示这个小提琴，但是我没有...请注意，刷新按钮/功能每次都在以下嵌套标签设置下工作，但是仅适用一次低于1.9 + ，然后失败。在上下文中，（在wordpress 下通过php加载动态内容）它根本不起作用。根据ajaxStart（）ajaxStop（）函数调用，每次单击刷新按钮时都会进行ajax调用，但是内容（在选项卡E 下查看日期/时间或选项卡A / sub 父E ）仅在首次点击#refresh按钮时重新加载，该按钮无法在后续点击中重新加载标签内容。

stye.css

div.clear { clear:both; }
#refresh {  position: relative; top:-40px; left:300px; }
#loading 
{   display:none; 
    position: absolute; 
    top:100px; 
    left:300px; 
    font-size: 200%; 
    z-index:1001; 
    border:3px solid green; 
    background:#ffffff; 
}

tabs.js

jQuery(function()
{   set_tabs();
    jQuery('body').on("click", "#refresh", function()
    {   jQuery('.tabset ul li a').each(function()
        {   var link = jQuery(this);
            var tab = link.parent();
            var tabset = link.closest('div.tabset');
            if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
        });
        jQuery(".tabset").tabs( "load" , index );
    });
    jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
    jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{   jQuery('.tabset').tabs({ cache:true }); }

的index.html

        <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet"-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="tabs.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />

<div id="parentTabSet" class="tabset">
    <ul>
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li>
        <li><a href="#C">C</a></li>
        <li><a href="#D">D</a></li>
        <li><a href="tabs_e.html">E</a></li>
    </ul>
    <input type='button' id='refresh' value='refresh' />
    <div id='loading'>Loading...</div>
    <div id="A" class="tabset">
        <ul>
            <li><a href="#A_1">A_1</a></li>
            <li><a href="#A_2">A_2</a></li>
            <li><a href="tabs_e.html">parent E</a></li>
        </ul>
        <div id="A_1"><p>A_1 - FOO</p></div>
        <div id="A_2"><p>A_2 - BAR</p></div>
    </div>
    <div id="B"><p>Div B</p></div>
    <div id="C"><p>Div C</p></div>
    <div id="D"><p>Div D</p></div>
</div>

tabs_e.html

<script>
jQuery( function()
{   set_tabs();
    var d = new Date();
    jQuery('#E_1 p').text(d);
    jQuery('#E_2 p').text(d);
});
</script>
<div class="tabset">
    <ul>
        <li><a href="#E_1">E_1</a></li>
        <li><a href="#E_2">E_2</a></li>
    </ul>
    <div id="E_1"><p>E_1 - BAR</p></div>
    <div id="E_2" class='clear'><p>E_2 - BAZ</p></div>
</div>

Answer 1

.live()函数已被弃用了一段时间，并且jQuery 1.9+中的支持已完全消失。使用此：

$(document).on("click", "#refresh", function() {
      // your current "live" code
});

Answer 2

事实证明，不仅1.9 +中的cache option been deprecated已经改变了遗留行为，使得（如果使用的话）加载方法不会重新加载标签内容。我想到的方法是 - 我认为 - 令人厌恶，我希望有人可以提供更清洁的选择。（哦pleeeaazzz！）无论如何，FWIW ......这就是我想出来的。

tabs.js （重新访问）

jQuery(function()
{   set_tabs();
    jQuery(document).on("click", "#refresh", function()
    {   refresh = {};
        refresh.tab = true;
        jQuery('.tabset ul li a').each(function()
        {   var link = jQuery(this);
            var tab = link.parent();
            var tabset = link.closest('div.tabset');
            if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');

        });
        jQuery(".tabset").tabs( "load" , index );
    });
    jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
    jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{   jQuery('.tabset').tabs(
    {   beforeLoad: function( event, ui)
        {   if(typeof refresh.tab =='undefined')
            {   if ( ui.tab.data( "loaded" ))
                { event.preventDefault();
                    return;
                }
                ui.jqXHR.success(function() {   ui.tab.data( "loaded", true );});
            }   else refresh={};
        }
    });
}

使用jquery UI 1.9+重新加载Ajax Tab

2 个答案: