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

Question

我目前正在尝试监听下拉列表中生成的选项的点击事件，但我目前无法实现。

由于 DOM 加载时不会生成选项，因此我将事件委托给文档来侦听对下拉选项的点击。我的代码目前看起来像这样：

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

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

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

编辑：仅供参考，我在 HTML 输入元素中添加了一个 class，这就是我监听 .accounts-input-selectize .option:[=14= 上的点击的原因]

<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

我公认的半生不熟 "solution" 的方法是创建一个插件来拦截点击选项的默认事件侦听器：

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'],
  ...
});

就是这样。

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

Selectize.js delegated event on option not working

javascript

jquery

events

selectize.js