Вопрос: Сценарий enqueue при добавлении пунктов меню означает перед сохранением пунктов меню

Я расширил класс Walker_Nav_Menu_Edit и добавил несколько новых настраиваемых полей на основе некоторых плагинов jQuery, таких как (wpColorPicker, fonIconPicker и выбор2). Я вызываю эти функции из разных файлов 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);});});

Затем я поставил этот js-файл в мою область администрирования Wordpress с помощью действия admin_enqueue_scripts .

Когда я добавляю новый элемент меню с панели Custom Link , эти функции не работают, пока я не нажму кнопку Save Menu , чтобы сохранить элемент меню, после сохранения элемента меню и перезагрузки nav-menus.php все функции работают без проблем.

INFO: , когда я использую функции jQuery внутри класса Walker_Nav_Menu_Edit ( Значит не в отдельном js-файле) внутри тега & lt; script & gt; & lt; /script & gt; все функции работают до сохранения пункта меню.

Как вызвать js-файл внутри Walker_Nav_Menu_Edit ? Или как я могу вызвать коды файлов js во время добавления пользовательских элементов ссылки перед сохранением пунктов меню?

Ответы и комментарии:

@Shibi К сожалению, я поместил itemId и menuItemType вне события click, теперь я обновил код. У меня есть больше функций и событий, связанных с плагином select2 jquery, в моем js-файле, но в моем вопросе только я добавляю некоторые коды, пока мой вопрос вам не станет понятен. Теперь только я хочу, чтобы мой код работал при добавлении элементов и после сохранения элементов.
Создан 19-06-2018 08:45 Shwan Namiq

@Shibi Я использовал обновленный код, а также код внутри $ ('body'). On ('click', 'a.item-edit', function () {}); работают только после сохранения пунктов меню и не работают при добавлении пункта меню
Создан 19-06-2018 09:46 Shwan Namiq

@Shibi Я обновил свой код и поместил все коды в свой js-файл, связанные с моими пунктами меню. Все коды работают отлично после сохранения пунктов меню. Только я хочу чтобы коды работали и функции запускались при добавлении пунктов меню перед сохранением пунктов. Я знаю, ты очень устал от моего вопроса. Спасибо за помощь
Создан 19-06-2018 09:12 Shwan Namiq

Я обновил свой код и проверил, работает ли он сейчас, jQuery.on не работал должным образом, поэтому я изменил его на функцию, которая запускается при нажатии. Работает хорошо в любых условиях.
Создан 19-06-2018 09:09 Shibi

Это JavaScript. Нет связи с WordPress.
Создан 19-06-2018 09:25 Max Yudin

Я использовал ваш код, но, тем не менее, функции, не работающие во время добавления пунктов меню, также должны сохранять меню до работы. Но я заметил, что Из Inspect-> Network When для добавления нового пункта меню пользовательской ссылки загружается только admin-ajax.php. Но когда я нажимаю на Сохранить меню, чтобы сохранить элементы, я вижу, что select2.js, fonticonpicker.js и другие плагины загружаются. Я думаю, нужно найти способ загрузить эти плагины во время добавления пунктов меню, прежде чем нажимать кнопку Сохранить меню.
Создан 14-06-2018 10:04 Shwan Namiq

Почему, когда я использую код jQuery внутри класса Edit Walker_Nav_Menu, все функции плагина работают во время добавления элементов? но когда я использую их внутри отдельного файла JS не работает?
Создан 14-06-2018 10:30 Shwan Namiq

@ShwanNamiq Сначала вам нужно загрузить select2.js и fonticonpicker.js и ваш пользовательский файл js в хуке admin_enqueue_scripts. О том, почему его, потому что JS загружается в строке и будет работать, когда его добавить в документ.
Создан 14-06-2018 10:00 Shibi

Я поставил плагины в очередь с помощью действия ловушки admin_enqueue_scripts. У меня нет проблем с этим. Я думаю, что я поставил в очередь все из них правильно, потому что после Save Menu все функции работают.
Создан 14-06-2018 10:44 Shwan Namiq

Большое спасибо, теперь все в порядке. У меня есть эта проблема более 8 месяцев, я спрашивал более 10 раз на нескольких форумах, я не получаю правильный ответ после всех этих попыток, я получаю правильный ответ, большое спасибо, что вы мне помогли
Создан 14-06-2018 10:54 Shwan Namiq

Поскольку к этим пунктам меню добавляется ответ ajax, вам необходимо снова запускать эти функции JS для каждого элемента, который вы добавляете в меню с событием document # menu-item-Added.
Добавьте что-то подобное в ваш файл JS.
$ (document) .on ('добавлен пункт меню', функция (событие, разметка) {
    // отладить, что хук работает
    console.log (разметки);
    $ .each (разметка, функция (индекс, menuItem) {
        if (menuItem.id) {
            // проверяем пункт меню html разметки
            console.log (MenuItem);
            $ ('#' + menuItem.id) .find ('. hpemenu-fonticons'). fontIconPicker ();
            $ ('#' + menuItem.id) .find ('. fonticons-iconwpcolorpicker'). wpColorPicker ();
            $ ('#' + menuItem.id) .find ('. bsnselect'). select2 ();
        }
    });
});

Добавьте событие щелчка с функцией, чтобы выполнить, где вы щелкаете в документе, готовом и в после добавленного пункта меню.
Итак, ваш код должен выглядеть так:
jQuery. (документ) .ready (function ($) {

    $ (». Hpemenu-fonticons') fontIconPicker ().
    $ ( 'Fonticons-iconwpcolorpicker.) WpColorPicker ().
    $ ( "Bsnselect") Выбор2 ().

    // Добавить событие клика
    . $ ( 'A.item-редактирования') нажмите (some_function);

    $ (document) .on ('добавлен пункт меню', функция (событие, разметка) {
        // отладить, что хук работает
        console.log (разметки);
        $ .each (разметка, функция (индекс, menuItem) {
            if (menuItem.id) {
                // проверяем пункт меню html разметки
                console.log (MenuItem);
                $ ('#' + menuItem.id) .find ('. hpemenu-fonticons'). fontIconPicker ();
                $ ('#' + menuItem.id) .find ('. fonticons-iconwpcolorpicker'). wpColorPicker ();
                $ ('#' + menuItem.id) .find ('. bsnselect'). select2 ();

                // Добавить событие клика
                $ ('#' + 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 () {
            // Некоторые коды здесь
        };
        showHideMenuItem ();
        menuItemType.on («изменить», showHideMenuItem);
    }
});
Создан 19-06-2018 09:15