jQuery mobile mega下拉列表添加了越来越多的按钮

时间:2018-02-05 14:42:51

标签: javascript jquery

我正在使用jquery插件在我的移动网站上生成一个大型下拉列表:

enter image description here

菜单是动态生成的:每次用户点击右箭头时,都会进行api调用以收集所点击的菜单项的所有子点。在菜单下方一切正常,但当我点击"返回"似乎每个菜单级都添加了一个前进/后退按钮:

enter image description here

这是我的代码:

// Catching the click-event
$(document).on('click','.next-button', function(){
    var subCatContainer = $(this).next('.subcats');
    var current = $(this).parent('.shopCatWithSub');
    var categoryid = current.data('categoryuuid');

    console.log('Next clicked');
    console.log(categoryid);

    if(typeof categoryid !== "undefined"){
        buildSubcats(categoryid, subCatContainer, standardUrl);
    } else {
        console.log("No category set!");
    }
});

// Get subcategories from API:
function buildSubcats(catid, subCatContainer, standardUrl) {
    $.ajax({
        type: 'GET',
        url: 'https://my-awesome-url.de/api?category-id=' + catid,
        dataType: 'jsonp',
        contentType: 'application/json',
        success: function (data) {
            handleResponse(data, subCatContainer, standardUrl);
        },
        error: function(XMLHttpRequest, textStatus, errorThrow) {
            console.log(errorThrow);
            if (jQuery.isFunction(callback)) {
            }       
        }
    });
}

// Build and add new nav-elements:
function handleResponse(data, subCatContainer, standardUrl){
    var output = '';
    $.each(data, function(key, category){
        var element = '';
        var uladd = "";
        var aClassAdd = "";
        if(category.hasSubcategories) {
            uladd = '<ul class="subcats"></ul>';
            aClassAdd = 'has-next-button';
        }
        element = '<li class="shopCatWithSub" data-categoryuuid="' + category.categoryUUID + '">'
            + '<a class="text-truncate menu-item ' + aClassAdd + '" href="' + standardUrl + category.categoryUUID + '">'
                + '<i class="icon-' + category.categoryIconClass + ' mr-2"></i>'
                + category.displayName
            + '</a>'
            + uladd 
        + '</li>';

        output += element;
    });
    subCatContainer.empty();
    subCatContainer.html(output);

    // Re-initialize menu
    $('.nav-mobile').mobileMegaMenu();
}

我认为重新初始化完整的菜单结构存在问题。但我无法弄清楚如何处理它。

0 个答案:

没有答案