Add click event on additional button in Selectize.js dropdown list

Question

I'm using your library Selectize.js, and I have one problem.

I want to add one button in $dropdown_content, so I'm using the render.option method.

When I want to catch click event, I'm unable to do it. All events are catched by "row" instead. How can I do this?

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

The cause of this problem is that selectize.js registers an onMouseDown event handler for clicks on options. This handler is called before click handlers and prevents other handlers from being called. If you use an onMouseDown handler instead of your onClick handler, it should work.

The handler must also be registered inline, because the actual HTML will only be rendered afterwards when the option dropdown opens.

I had to spend some time to figure out this issue. We also need to have complex HTML with behavior in our options list, and the radical event handler prevention by selectize causes issues here. In my oppinion it would be a useful enhancement to not prevent event handlers.

Answer 2

I struggled a while on this matter, and this was what I ended up with in the end. I hope it will help others with defining their own solution to this and/or other similar problems. The code is based on the example given in the above question, and is not tested in that particular setup. The "magic" happens in the onDropdownOpen method, and that should be the logic of interest.

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

    });
  }
});