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

我到admitedly半生不熟的「解決方案」的做法是創建攔截在選項的默認事件偵聽器點擊插件：

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); 
     } 
    }); 
    } 
}); 

下一步是使用先前創建的插件初始化選擇，如下所示：

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

就是這樣。

Answer 2

這個問題聽起來很簡單，但它不是。問題在於selectize可以防止所有的默認設置，所以起初我不推薦使用這個lib，但是如果你確實想要的話，還有一種方法可以找出用戶是否改變了這個選項。

$('#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/