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中的change函数中创建异常

1 个答案: