刷新Ajax选项卡与jQuery UI 1.9+

Question

尽管他们有很多关于通过加载方法重新加载jQueryUI选项卡的帖子，但我似乎无法使其在1.9+中工作。我希望我能看到一种方法来显示这一点在小提琴中，但因为我不...注意刷新按钮/功能每次在下面的嵌套标签设置低于1.8 +，但工作只有一次1.9 +，然后失败。在上下文中，（通过php下的wordpress加载动态内容）它不起作用在所有。按照ajaxStart（）ajaxStop（）函数调用，一个Ajax调用时每次刷新按钮被点击的时间，但是内容（观看的日期/时间标签下é或标签A /子父è ）仅在第一次点击#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

所以事实证明，不仅具有cache option been deprecated在1.9+它的传统行为已经改变，使得（如果使用）load方法不会重新加载选项卡的内容。 我提出的方法是 - 我认为 - 我很憎恶，我希望有人可以提供一个更清洁的替代方案。 （哦，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={}; 
     } 
    }); 
}