Because this menu items are appended with ajax response you need to run this JS functions again for each item that you add to the menu with the document#menu-item-added
event.
Add something like this in your JS file.
$(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 with function to run where you click in the document ready and in after menu item added.
So Your code should look like this:
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);
}
});