I created code for dropdown menu instead of classic select menu which I am not able to style. I have last step to remove dropdown list if focusout event is fired, but I ahve this problem. It is not working for one element in my code.
I am thinking a long time why it is not fired focusout event on this element inputSelectSubCat = $("input[name=subcategory]");
or generally var inputSelect = $('.add-item__input-select');
.
In firefox developer console it is added action for this event, but it is never fired.
Thank you very much for your advices.
This is my code:
/* SELECT CATEGORIES AND FILTER CONNECTIONS*/
// Declare variables
var inputSelectCat = $("input[name=category]"),
inputSelectSubCat = $("input[name=subcategory]"),
arrowDown = inputSelectSubCat.next(),
catNameOld;
// Defaultly setup subcategory input as disable until category is not chosen
inputSelectSubCat.addClass('stop');
// Disable placeholder hidding - disable focus event
inputSelectSubCat.on('mousedown', function() {
event.preventDefault();
});
// Defaultly hide arrowdown of input subcategory until category is not chosen
inputSelectSubCat.next().hide();
inputSelectCat.on('focusin', function() {
catNameOld = $(this).val();
});
localStorage.clear();
// If change value of category then change options of subcategory
inputSelectCat.on('focusout', function() {
var catNameNew = $(this).val(),
arrowDown = inputSelectSubCat.next();
// Send cat id to add.php to change select options in html according to cat id
$.ajax({
url: 'add.php',
type: 'post',
data: {
cat_name_js: catNameNew
}
}).done(function(html) {
var subCatMenuNew = $(html).find('select[name=subcategory]'),
subCatMenuCurrent = $('#section-info').find('select[name=subcategory]');
// Replace current select by new one - data for dropdown list are loaded from select
subCatMenuCurrent.html(subCatMenuNew);
})
// Allow subcategory input always if category is chosen and value is not empty
if (catNameNew !== '') {
arrowDown.show();
inputSelectSubCat.removeClass('stop');
}
// If different category is chosen, then clear input value
if (catNameOld !== catNameNew) {
inputSelectSubCat.val('');
}
});
// If change value of category then change options of subcategory
inputSelectSubCat.on('focusout', function() {
$('#filters, #section-filters').show();
});
/* SELECT REPLACED BY DIV JS */
var inputSelect = $('.add-item__input-select');
// Add new div with options after click on select
inputSelect.on('click', function(event) {
event.preventDefault();
var currentNewDropdown = $(this).next(),
currentInput = $(this),
currentSelect = $(this).parent().find('select');
// Do not allow to add dropdown list for subcategory if it has class 'stop'
if ( !currentInput.hasClass('stop')) {
// Check if new div dropdown already exists if not add new one
if ( !currentNewDropdown.hasClass('add-item__custom-select-box') ) {
var newDropdown = $('<div/>') // create new div element
.addClass('add-item__custom-select-box') // with class NewDropdown
.insertAfter($(this)); // and append it to page
}
}
// If select was already clicked on, then do not create new dropdown list
if ( !currentInput.hasClass('added') ) {
// Check each option value and attach it to new dropdown as div
currentSelect.find('option').each(function(index, element) {
var option = $(this); // this is the option from the original select
currentNewDropdown = $(this).parent().next();
// If option is disabled do not append it to new dropdown list
if (!option.prop('disabled')) {
// Create dropdown list as copy of original select list
var newOption = $('<div/>') // create new div element
.addClass('add-item__custom-select-box-items') // with class NewDropdown-item
.html(option.html()) // copy content from original option
.data('value', option.val()) // copy value from original option
.appendTo(newDropdown); // append it to the new dropdown
}
})
// Show new dropdown options after click on select
if ( !currentInput.hasClass('stop')) {
currentNewDropdown = $(this).next();
currentNewDropdown.show();
currentInput.addClass('added');
}
}
});
// Remove dropdown list if focusout without value chosen
inputSelect.on('focusout', function() {
console.log('2');
var newDropdown = $(this).parent().find('.add-item__custom-select-box'),
inputValue = $(this).val();
newDropdown.remove();
inputSelect.removeClass('added');
inputSelect.addClass('black-text');
});
// Add value of clicked element to original option
$('.add-item__input-wrapper').on('mousedown','.add-item__custom-select-box-items', function() {
var clickedOptionText = $(this).text(), // Get choosen otion text
clickedOptionVal = $(this).data('value'), // Get choosen option value
currentInput = $(this).parent().prev(),
currentSelect = $(this).parent().parent().find('select'),
newDropdown = $(this).parent();
currentSelect.val(clickedOptionVal); // Set up value of original select
currentInput.val(clickedOptionText); // Show chosen value in input
newDropdown.remove();
inputSelect.removeClass('added');
inputSelect.addClass('black-text');
});