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="autopleteAvatar" 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 :-(
});

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="autopleteAvatar" 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 :-(
});

• javascript
• jquery
• selectize.js

• how are you trying to do it? post some code, or jsfiddle. – Acelasi Eu Commented Dec 10, 2013 at 13:42
• I've updated first post. – michail_w Commented Dec 10, 2013 at 13:48
• try $('#myInput').click(function(){ alert('Hello') }); – Acelasi Eu Commented Dec 10, 2013 at 13:50
• try using this ivaynberg.github.io/select2 instead.... – Acelasi Eu Commented Dec 10, 2013 at 14:14

2 Answers 2

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 plex 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.

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="autopleteAvatar" 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');

    });
  }
});