在 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，并且通过 selectize 进行的激进事件处理程序预防会导致此处出现问题。在我看来，不阻止事件处理程序将是一个有用的增强。

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

    });
  }
});