在 jQuery 中的更改函数内创建异常

Question

我有以下 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();
}

并执行它而不是单独删除标签的行。不过，似乎还没有弄清楚如何将此技术用于此目的。有什么建议吗？

Answer 1

正如@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'});
            }
        },
    });

在 jQuery 中的更改函数内创建异常

Make exceptions inside a change function in jQuery

javascript

jquery

stoppropagation