javascript - Selectize.js 委托(delegate)事件选项不起作用

Question

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

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

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/