У меня есть следующий код jQuery:
$('#invitation_emails').on('change', function () {
var tagsArray = $('#invitation_emails')[0].selectize.items;
var lastItem = tagsArray[tagsArray.length - 1];
var emailHelpBlock = $($('.invitation').find('.help-block')[0])
if (!isEmail(lastItem) && !_.isUndefined(lastItem)) {
$('#invitation_emails')[0].selectize.removeItem(lastItem);
if (emailHelpBlock.is(":hidden")) {
emailHelpBlock.show( 'slide', { direction: 'down'});
}
} else {
emailHelpBlock.hide( 'slide', { direction: 'up'});
}
});
Учитывая массив тегов, он проверяет, является ли содержимое тега допустимым адресом электронной почты. В противном случае код удаляет тег и должен отображать справочное сообщение, ТОЛЬКО если такое сообщение скрыто. Если следующая попытка снова окажется неверным адресом, сообщение должно остаться видимым, иначе оно должно быть скрыто.
Однако с этим кодом сообщение не отображается правильно во всех сценариях. Проблема в том, что, когда электронное письмо недействительно, функция удаляет тег со строкой:
$('#invitation_emails')[0].selectize.removeItem(lastItem);
и это нежелательно рассматривать как изменение. Поэтому функция запускается снова, проверяет действительность предыдущего тега, если он существует, и соответственно показывает или скрывает сообщение.
Я бы хотел, чтобы функция игнорировала изменение, которое происходит в результате удаленного тега, но я не могу понять, как это сделать. Я пробовал создать такую функцию, как:
function remove_tag(e) {
$('#invitation_emails')[0].selectize.removeItem(lastItem);
e.stopPropagation();
}
и выполнить его вместо строки, удаляющей только тег. Хотя, похоже, не понимаю, как использовать эту технику для этих целей. Любой совет?
так что вы хотите, чтобы ваш код запускался только тогда, когда тег ДОБАВЛЕН, а не УДАЛЕН?
@Scaramouche, вы меня попали в середину фрагмента! Это займет у меня больше, чем я думал. Да, на самом деле это так. Думая об этом, может быть проще, если я дважды проверю Selectizer и посмотрю, есть ли у них события, которые я могу использовать для этого.
Я никогда не использовал selectize.js, но нашел эта страница, который может помочь, обратите внимание на onItemAdd
/ onItemRemove
@Scaramouche здесь опаздывает !! Я посмотрю, так должно быть проще. Большое спасибо.
@Scaramouche готово. Намного легче. Спасибо, что напомнили мне о важности чтения документации, прежде чем делать что-либо на заказ. Это могло бы сэкономить мне много времени!
Как предложил @Scaramouche, гораздо проще искать уже доступный обработчик событий в плагине Selectize. Теперь проверка выполняется только при добавлении элемента, не вызывая непредвиденных проблем.
$('#invitation_emails').selectize({
plugins: ['remove_button'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
},
onItemAdd: function(e){
var itemText = e;
var emailHelpBlock = $($('.invitation').find('.help-block')[0]);
if (!isEmail(itemText) && !_.isUndefined(itemText)) {
$('#invitation_emails')[0].selectize.removeItem(itemText);
if (emailHelpBlock.is(":hidden")) {
emailHelpBlock.show( 'slide', { direction: 'down'});
}
} else {
emailHelpBlock.hide( 'slide', { direction: 'up'});
}
},
});
фрагмент! фрагмент! фрагмент!