Добавить событие click на дополнительной кнопке в выпадающем списке Selectize.js

Question

Я использую вашу библиотеку Selectize.js, и у меня есть одна проблема.

Я хочу добавить одну кнопку в $dropdown_content, поэтому я использую метод render.option.

Когда я хочу поймать событие click, я не могу это сделать. Вместо этого все события захватываются «строкой». Как я могу это сделать?

$('#myInput').selectize({ 
    render: { 
     option: function(item, escape) { 
      return '<div class="item">' + 
       '<img class="autocompleteAvatar" src="' + (typeof item.avatar != 'undefined' ? item.avatar : '') + '"/>' + 
       (typeof item.nick != 'undefined' && escape(item.nick).length>0 ? '<span class="nick">'+escape(item.nick)+'</span><br/>':'') + 
       (typeof item.value != 'undefined' && escape(item.value).length>0 ? '<span class="email' + 
        (typeof item.nick != 'undefined' && escape(item.nick).length>0 ? '':' only') + 
        '">'+escape(item.value)+'</span>' : '') + 
       '<a href="#" class="remove" data-id="'+(typeof item.id == 'undefined' || item.id==''? '' : item.id)+'" data-source="'+(typeof item.source=='undefined' ? '' : item.source)+'" data-email="'+escape(item.value)+'"></a>' + 
       '<div class="border"></div>' + 
       '</div>'; 
     } 
    } 
}); 

$('div.selectize-dropdown').on('click', 'a.remove', function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 

    alert('Hello'); 
    //can't see it :-(
}); 

Answer 1

Причина этой проблемы заключается в том, что selectize.js регистрирует обработчик события onMouseDown для кликов по параметрам. Этот обработчик вызывается перед обработчиками кликов и запрещает вызов других обработчиков. Если вы используете обработчик onMouseDown вместо обработчика onClick, он должен работать.

Обработчик также должен быть зарегистрирован в строке, потому что фактический HTML будет отображаться только после раскрывающегося списка опций.

Мне пришлось потратить некоторое время, чтобы выяснить эту проблему. Нам также необходимо иметь сложный HTML-код с поведением в нашем списке опций, а также предотвращать радикальный обработчик событий, выбирая причины проблем. В моем выступлении было бы полезным усилением, чтобы не препятствовать обработчикам событий.

Answer 2

Я долго боролся с этим вопросом, и в конце концов я закончил. Я надеюсь, что это поможет другим людям определить собственное решение этой проблемы и/или другие подобные проблемы. Код основан на примере, приведенном в вышеуказанном вопросе, и не тестируется в этой конкретной установке. «Магия» происходит в методе onDropdownOpen, и это должно быть логикой интереса.

$('#myInput').selectize({ 
    render: { 
    option: function(item, escape) { 
     return '<div class="item">' + 
     '<img class="autocompleteAvatar" src="' + (typeof item.avatar != 'undefined' ? item.avatar : '') + '"/>' + 
     (typeof item.nick != 'undefined' && escape(item.nick).length > 0 ? '<span class="nick">' + escape(item.nick) + '</span><br/>' : '') + 
     (typeof item.value != 'undefined' && escape(item.value).length > 0 ? '<span class="email' + 
      (typeof item.nick != 'undefined' && escape(item.nick).length > 0 ? '' : ' only') + 
      '">' + escape(item.value) + '</span>' : '') + 
     '<a href="#" class="remove" data-id="' + (typeof item.id == 'undefined' || item.id == '' ? '' : item.id) + '" data-source="' + (typeof item.source == 'undefined' ? '' : item.source) + '" data-email="' + escape(item.value) + '"></a>' + 
     '<div class="border"></div>' + 
     '</div>'; 
    } 
    }, 
    onDropdownOpen: function() { 
    $('.selectize-dropdown-content').on('mousedown', 'div[data-selectable] a.remove', function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 

     alert('Hello'); 

    }); 
    } 
});