Selectize.js 选项上的委托事件不起作用

Question

我目前正在尝试收听下拉菜单中生成的选项的点击事件，但我目前无法实现这一点。

由于在加载 DOM 时不会生成选项，因此我将事件委托给文档以侦听下拉选项的点击。我的代码目前如下所示：

var $accountsSelectize = $('#accounts-input').selectize({
  ...
});

$(document).on('click', '.accounts-input-selectize .option', function(event) {
  alert('An option was clicked!');
});

但这似乎不起作用。知道为什么会这样吗？任何有关为什么此事件根本没有触发的线索都将受到欢迎。

编辑：仅供参考，我正在向 HTML 输入元素添加一个类，这就是为什么我要监听 .accounts-input-selectize .option 上的点击：

<input type="text" id="accounts-input" class="accounts-input-selectize" placeholder="Search accounts">

Answer 1

这个问题听起来很简单，但事实并非如此。问题是 selectize 会阻止所有默认值，所以一开始我会推荐使用这个库，但如果你真的想要，还有一种方法可以查明用户是否更改了选项。

$('#select-country').selectize({

      //When user selects the widget we'll rememberize its value
      onFocus: function(){
        $(this).data('temp-saved', $('#select-country').val());
      },

      //On blur we check if the value has not changed
      onBlur: function(){
        var previous = $(this).data('temp-saved');
        var current = $('#select-country').val();

        if (current == previous) {
                console.log('NOT changed!');
        }
      },

      //And on change we sure that the value has changed
      onChange: function(current){
            var previous = $(this).data('temp-saved');
            console.log('changed from', previous, 'to', current);
      }
  });

https://jsfiddle.net/mo1Ljm7r/13/

Answer 2

对于一个公认的半生不熟的“解决方案”，我的方法是创建一个插件来拦截默认事件侦听器以点击选项：

Selectize.define('click2deselect', function(options) {
  var self = this;
  var setup = self.setup;
  this.setup = function() {
    setup.apply(self, arguments);

    // Intercept default handlers
    self.$dropdown.off('mousedown click', '[data-selectable]').on('mousedown click', '[data-selectable]', function(e) {
      var value = $(this).attr('data-value'),
          inputValue = self.$input.attr('value');

      if (inputValue.indexOf(value) !== -1) {
        var inputValueArray = inputValue.split(','),
            index = inputValueArray.indexOf(value);

        inputValueArray.splice(index, 1);

        self.setValue(inputValueArray);
        self.focus();
      } else {
        return self.onOptionSelect.apply(self, arguments);
      }
    });
  }
});

下一步是使用之前创建的插件初始化 Selectize，如下所示：

var $accountsSelectize = $('#accounts-input').selectize({
  plugins: ['click2deselect'],
  ...
});

就是这样。