jQuery ui-tabs .bind ("tabsactivate", функция (событие, пользовательский интерфейс) не работает при перезагрузке - PullRequest
Новая
       71

jQuery ui-tabs .bind ("tabsactivate", функция (событие, пользовательский интерфейс) не работает при перезагрузке

0 голосов
/ 25 апреля 2020

Я динамически создаю таблицу (по нажатию кнопки) и сохраняю текущий индекс вкладки, когда вкладка активирована (нажата). Это работает в первый раз, когда я создаю таблицу; однако, если я заново создаю вкладку для загрузки других данных (скройте эту форму, 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());
});

Однако все еще работает: 

$("#menuTabs a").click(function(e){

Полный контекст: 

$('#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: 

<div id="dayTabs" class="container">
    <span id="menuDetails">

    </span>
</div>

1 Ответ

0 голосов
/ 26 апреля 2020

Я понял, что смешиваю bootstrap вкладки с jQuery пользовательскими вкладками. Решение wss to:

Удалить: 

$('#dayTabs').tabs();
$('#dayTabs').bind("tabsactivate", function (event, ui) {
    alert('oldTab = ' + ui.oldTab.index());
    alert('newTab = ' + ui.newTab.index());
    sessionStorage.setItem('ssCurrentTab', ui.newTab.index());
});

И добавить: 

sessionStorage.setItem('ssCurrentTab', $(e.target).closest('li').index());

Согласно: 

$("#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');
});
...