添加菜单项期间的enqueue脚本意味着在保存菜单项之前

Question

我扩展了Walker_Nav_Menu_Edit类，并根据一些jQuery插件(wpColorPicker、fonIconPicker和Select2)添加了一些新的自定义字段。我从不同的js文件中调用这些函数，如下所示

jQuery(document).ready(function($) {

$('.fonticons-iconwpcolorpicker').wpColorPicker();

$(".hpemenu-fonticons-size").TouchSpin({
    min: 12,
    max: 100,
    stepinterval: 50,
    maxboostedstep: 1000,
    postfix: 'px'
});

$(".hpemenu-itemesnum").TouchSpin({
        min: 1,
        max: 100,
        stepinterval: 50,
        maxboostedstep: 1000,
        postfix: 'Items or posts'
});

$(".bsnselect").select2({
    placeholder: "Select ...",
    width: '100%',
    minimumResultsForSearch: Infinity,
    theme: "classic"
});

var hpemenuFontIcons = $('.hpemenu-fonticons').fontIconPicker({
    theme: 'fip-bootstrap'
});
$.ajax( {
    url: hpemenu_ajax_object.fontIconsJsonUrl,
    type: 'GET',
    dataType: 'json'
} )
.done( function( response ) {
    hpemenuFontIcons.setIcons( response );
} );

$('a.item-edit').click(function() {
    var itemId = $(this).closest('li').attr('id');
    var menuItemType = $('#' + itemId + ' .field-menuitem-type input');
    var defaultMenu = $('#' + itemId + ' .bsnavbar-default');
    var advanceMenu = $('#' + itemId + ' .bsnavbar-advance');
    var urlInput = $('#' + itemId + ' .bsn-menuitem-url');
    var bsnAdditionalSection = $('#' + itemId + ' .bsn-menuitem-additional');

    var showHideMenuItem = function() {
        var menuItemValue = $('#' + itemId + ' .field-menuitem-type input:checked').val();
        if (menuItemValue === 'defaultmenu') {
            defaultMenu.add(urlInput).add(bsnAdditionalSection).show();
            advanceMenu.hide();
        } else if (menuItemValue === 'advancemenu') {
            advanceMenu.add(defaultMenu).show();
            urlInput.add(bsnAdditionalSection).hide();
        } else {
            defaultMenu.add(advanceMenu).hide();
        }
    };
    showHideMenuItem();
    menuItemType.on('change', showHideMenuItem);


    var menuItemLayoutCheckboxes = $('#' + itemId + ' .field-menuitemlayouts input');
    var menuItemName = $('#' + itemId + ' .bsn-menuitem-name');
    var fontIconsSection = $('#' + itemId + ' .menuitem-fonticons');

    var menuItemLayoutsFunc = function() {
        var menuItemLayoutChecked = $('#' + itemId + ' .field-menuitemlayouts input:checked').val();
        if ( menuItemLayoutChecked === 'itemwithouticon' ) {
            fontIconsSection.hide();
            menuItemName.show();
        } else if ( menuItemLayoutChecked === 'itemicon' ) {
            menuItemName.hide();
            fontIconsSection.show();
        } else {
            fontIconsSection.add(menuItemName).show();
        }
    };
    menuItemLayoutsFunc();
    menuItemLayoutCheckboxes.on( 'change', menuItemLayoutsFunc);

    var contentType = $('#' + itemId + ' .field-content-type input');
    var uniformBox = $('#' + itemId + ' p.uniform-title, #' + itemId + ' p.field-uniform');
    var uniformSelect = $('#' + itemId + ' p.field-uniform select');
    var customCat = $('#' + itemId + ' p.field-custom-cat');
    var customTag = $('#' + itemId + ' p.field-custom-tag');
    var customCatsTab = $('#' + itemId + ' p.field-custom-cats-tab');
    var customTagsTab = $('#' + itemId + ' p.field-custom-tags-tab');
    var customTagsOfCat = $('#' + itemId + ' p.field-custom-tags-of-cat-tab');
    var gridLayout = $('#' + itemId + ' p.field-items-grid');
    var itemsNumber = $('#' + itemId + ' p.field-items-num');

    var showHideCatTagTab = function() {
        uniformSelect.find('option:selected').each(function() {
            if ($(this).attr('value') === 'custom-cat') {
                customCat.show();
                customTag.add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr('value') === 'custom-tag') {
                customTag.show();
                customCat.add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr('value') === 'custom-cats-tab') {
                customCatsTab.show();
                customCat.add(customTag).add(customTagsTab).add(customTagsOfCat).hide();
            } else if ($(this).attr('value') === 'custom-tags-tab') {
                customTagsTab.show();
                customCat.add(customTag).add(customCatsTab).hide();
            } else if ($(this).attr('value') === 'custom-tags-of-cat-tab') {
                customTagsOfCat.show();
                customTag.add(customCat).add(customCatsTab).add(customTagsTab).hide();
            } else {
                customCat.add(customTag).add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            }
            if ($(this).attr('value') === 'contact' || $(this).attr('value') === 'search') {
                itemsNumber.add(gridLayout).hide();
            } else {
                itemsNumber.add(gridLayout).show();
            }
        });
    };
    showHideCatTagTab();
    uniformSelect.on('change', showHideCatTagTab);

    var multipleBox = $('#' + itemId + ' p.multiple-title, #' + itemId + ' p.field-multiple');
    var multipleSelect = $('#' + itemId + ' p.field-multiple select');
    var customCategory = $('#' + itemId + ' p.field-custom-category');
    var customTags = $('#' + itemId + ' p.field-custom-tags');
    var categoryFlag = false;
    var tagFlag = false;
    var itemsFalg = false;

    var showHideCatTag = function() {
        multipleSelect.find('option:selected').each(function() {
            if ($(this).attr('value') === 'custom-category') {
               categoryFlag = true;
            }
            if ($(this).attr('value') === 'custom-tags') {
               tagFlag = true;
            }
        });
        if(categoryFlag && tagFlag) {
            customCategory.add(customTags).show();
            categoryFlag = false;
            tagFlag = false;
        } else if(categoryFlag && !tagFlag) {
            customCategory.show();
            customTags.hide();
            categoryFlag = false;
            tagFlag = false;
        } else if(!categoryFlag && tagFlag) {
            customCategory.hide();
            customTags.show();
            categoryFlag = false;
            tagFlag = false;
        } else {
            customCategory.add(customTags).hide();
            categoryFlag = false;
            tagFlag = false;
        }
    };
    showHideCatTag();
    multipleSelect.on('change', showHideCatTag);

    var showHideUniMul = function() {
        var contentTypeValue = $('#' + itemId + ' .field-content-type input:checked').val();
        if (contentTypeValue === 'uniform') {
            uniformBox.show();
            showHideCatTagTab();
            multipleBox.hide(function() {
                customCategory.add(customTags).hide();
            });
        } else if (contentTypeValue === 'multiple') {
            multipleBox.show();
            showHideCatTag();
            uniformBox.hide(function() {
                customCat.add(customTag).add(customCatsTab).add(customTagsTab).add(customTagsOfCat).hide();
            });
        } else {
            uniformBox.add(multipleBox).hide();
        }
    };
    showHideUniMul();
    contentType.on('change', showHideUniMul);

});

});

然后，我使用admin_enqueue_scripts操作将这个js文件排队到我的Wordpress管理区域。

当我从Custom Link面板中添加新菜单项时，这些函数直到我单击Save Menu按钮保存菜单项，保存菜单项并重新加载nav-menus.php之后才能正常工作。

INFO:当我在Walker_Nav_Menu_Edit类中使用D6函数时(意思不是在单独的js文件中)，在标记中，所有函数都在保存菜单项之前工作。

如何在Walker_Nav_Menu_Edit中调用js文件？或者如何在保存菜单项之前添加自定义链接项时触发js文件代码？

Answer 1

由于此菜单项附加了ajax响应，因此需要对添加到菜单中的带有document#menu-item-added事件的每个项目再次运行此JS函数。

在JS文件中添加类似的内容。

$(document).on('menu-item-added', function(event, markup) {
    // debug that the hook work
    console.log(markup);
    $.each(markup, function(index, menuItem) {
        if(menuItem.id) {
            // check menu item html markup
            console.log(menuItem);
            $('#' + menuItem.id).find('.hpemenu-fonticons').fontIconPicker();
            $('#' + menuItem.id).find('.fonticons-iconwpcolorpicker').wpColorPicker();
            $('#' + menuItem.id).find('.bsnselect').select2();
        }
    });
});

添加具有函数的单击事件以运行您在文档中单击“就绪”和“添加后菜单项”的位置。

所以您的代码应该如下所示：

jQuery.(document).ready(function($) {

    $('.hpemenu-fonticons').fontIconPicker();
    $('.fonticons-iconwpcolorpicker').wpColorPicker();
    $(".bsnselect").select2();

    // Add click event
    $('a.item-edit').click(some_function);

    $(document).on('menu-item-added', function(event, markup) {
        // debug that the hook work
        console.log(markup);
        $.each(markup, function(index, menuItem) {
            if(menuItem.id) {
                // check menu item html markup
                console.log(menuItem);
                $('#' + menuItem.id).find('.hpemenu-fonticons').fontIconPicker();
                $('#' + menuItem.id).find('.fonticons-iconwpcolorpicker').wpColorPicker();
                $('#' + menuItem.id).find('.bsnselect').select2();

                // Add click event
                $('#' + menuItem.id).find('a.item-edit').click(some_function);
            }
        });
    });

    function some_function() {
        var itemId = $(this).closest('li').attr('id'),
            menuItemType = $('#' + itemId + ' .field-menuitem-type input');

        var showHideMenuItem = function() {
            //Some codes here
        };
        showHideMenuItem();
        menuItemType.on('change', showHideMenuItem);
    }
});