[英]jQuery ui-tabs .bind(“tabsactivate”, function (event, ui) does not work when reloaded
I am dynamically creating a table (on click of a button) and storing the current tab index when the tab is activated (clicked on).我正在动态创建一个表(单击按钮)并在激活选项卡(单击)时存储当前的选项卡索引。 This works the first time I create the table;
这在我第一次创建表时有效; however, if I recreate the tab to load different data (hide this form, go back to the previous form and click the button to display) then the following does not work:
但是,如果我重新创建选项卡以加载不同的数据(隐藏此表单,go 返回上一个表单并单击按钮显示),则以下内容不起作用:
$('#dayTabs').tabs();
$('#dayTabs').bind("tabsactivate", function (event, ui) {
alert('oldTab = ' + ui.oldTab.index());
alert('newTab = ' + ui.newTab.index());
sessionStorage.setItem('ssCurrentTab', ui.newTab.index());
});
However, the following still works:但是,以下仍然有效:
$("#menuTabs a").click(function(e){
The full context is:完整的上下文是:
$('#updateDailyProgram').click(function() {
sessionStorage.setItem('ssFromDate', $("#updateFromDate").val());
$("#menuDetails").empty();
sessionStorage.setItem('ssCurrentDate', $("#updateFromDate").val());
sessionStorage.setItem('ssCurrentTab', 0);
$("#menuDetails").append("<ul id='menuTabs' class='nav nav-tabs'></ul>").find('ul');
var newDateString = $("#updateFromDate").val();
var firstTab = "Y";
for (var i = 0; i < sessionStorage.getItem('ssProgramDays'); i++){
if (firstTab === "Y"){
$("#menuTabs").append("<li class='nav-item'><a href='#home' class='nav-link active' name='"+newDateString+"'>"+newDateString+"</a></li>");
firstTab = "N";
}else{
$("#menuTabs").append("<li class='nav-item'><a href='#home' class='nav-link' name='"+newDateString+"'>"+newDateString+"</a></li>");
}
//Add 1 day to date
newDateString = moment(newDateString, 'DD/MM/YYYY').add(1, 'days');
newDateString = newDateString.format('DD/MM/YYYY');
};
$('#showProgramUpdateForm').hide();
$('#programEditForm').show();
//Show first tab
loadProgramDailyTable($("#updateFromDate").val());
$("#menuTabs a:eq(0)").tab('show');
$('#dayTabs').tabs();
$('#dayTabs').bind("tabsactivate", function (event, ui) {
alert('oldTab = ' + ui.oldTab.index());
alert('newTab = ' + ui.newTab.index());
sessionStorage.setItem('ssCurrentTab', ui.newTab.index());
});
$("#menuTabs a").click(function(e){
e.preventDefault();
sessionStorage.setItem('ssCurrentDate', $(this).attr('name'));
loadProgramDailyTable($(this).attr('name'));
$(this).tab('show');
});
});
HTML: HTML:
<div id="dayTabs" class="container">
<span id="menuDetails">
</span>
</div>
I realised that I was mixing bootstrap tabs with jQuery ui-tabs.我意识到我正在将引导选项卡与 jQuery ui-tabs 混合使用。 The solution wss to:
解决方案 wss:
Delete:删除:
$('#dayTabs').tabs();
$('#dayTabs').bind("tabsactivate", function (event, ui) {
alert('oldTab = ' + ui.oldTab.index());
alert('newTab = ' + ui.newTab.index());
sessionStorage.setItem('ssCurrentTab', ui.newTab.index());
});
And add:并添加:
sessionStorage.setItem('ssCurrentTab', $(e.target).closest('li').index());
As per:按照:
$("#menuTabs a").click(function(e){
e.preventDefault();
sessionStorage.setItem('ssCurrentTab', $(e.target).closest('li').index());
sessionStorage.setItem('ssCurrentDate', $(this).attr('name'));
loadProgramDailyTable($(this).attr('name'));
$(this).tab('show');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.