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

我在这个问题上挣扎了一段时间，这就是我最终得到的结果。我希望它能帮助其他人定义他们自己的解决方案和/或其他类似的问题。该代码基于上述问题中给出的示例，并未在该特定设置中进行测试。＆＃34;魔术＆＃34;发生在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');

    });
  }
});

在Selectize.js下拉列表中的其他按钮上添加点击事件

2 个答案: