Selectize.js 위임 된 이벤트가 작동하지 않습니다.

Question

현재 드롭 다운 안에 생성 된 옵션에 대한 클릭 이벤트를 듣고 싶지만 현재이를 수행 할 수 없습니다.

DOM이로드 될 때 옵션이 생성되지 않으므로 문서의 드롭 다운 옵션에 대한 수신 대기 이벤트를 위임하고 있습니다. 내 코드는 현재 다음과 같습니다.

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

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

하지만이 코드는 작동하지 않는 것 같습니다. 왜 이런 일이 벌어지고 있는지에 대한 아이디어가 있습니까? 이 사건이 왜 전혀 발사되지 않는지에 대한 단서는 환영 할만한 것이 아닙니다.

<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

문제는 간단 소리,하지만하지 :

편집 : 나는 .accounts-input-selectize .option에 클릭을 듣고있어 왜 그냥 참고로, 나는 HTML 입력 요소에 클래스를 추가 해요, 그건. 문제는 select가 모든 기본값을 방지한다는 것입니다. 그래서 처음에는이 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/