1

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

样式.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 }); }

索引.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>
4

2 回答 2

0

所以事实证明，不仅缓存选项在 1.9+ 中被弃用，它的遗留行为也被改变了，因此（如果使用）加载方法不会重新加载选项卡内容。我想出的方法是——我认为——一种可憎的东西，我希望有人可以提供一个更清洁的替代方案。（哦，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={};
        }
    });
}
于 2013-03-14T21:56:20.457 回答
0

该.live()功能已经被弃用了一段时间，并且在 jQuery 1.9+ 中完全没有支持。用这个：

$(document).on("click", "#refresh", function() {
      // your current "live" code
});
于 2013-03-14T18:42:51.750 回答