Selectize.js: Adding click event to items

[djthread]

I'm trying to add a click event to the rendered item units, but it seems some other click event -- from jquery? -- is taking precedence. I'm not sure I need the "selecting" functionality that it provides, so is there a way for me to let my click event take affect instead?

In my plnkr, select an element from the selectize dropdown. You will then get the blue box inside the input. My rendered directive, which I've successfully managed to get rendering properly, DOES appear in the input, but clicking on it does not trigger the ng-click="go()" which should cause an alert().

Any thoughts? Thanks, guys!!

http://plnkr.co/edit/MQqUdym0EU6nUoT5vaE5?p=preview

[artiaggarwal]

you can add click events on items as below (the below block lets you add another item next to current item on click)

  $(document).on('click', '.item', function (e) {
        $itemval = $(this);
        var testing = $itemval.data();
         var myparent = "#"+$item.parent().parent().prev().attr('id');
          var control =$(myparent)[0].selectize;
          control.refreshItems();
        control.refreshOptions();
        control.advanceSelection(1, e);
}

[Kitof]

Do you know why

    $(document).on('click', 'div.selectize-input div.item', function (e) {
               alert("test");
    });

works, and

    $('div.selectize-input div.item').on('click', function(e) {
                alert("test");
    });

doesn't ?

[mts88]

Probably because $(document).on(....) listens the entire DOM, also the elements added dinamically after the DOM is loaded, instead $(..).on(..) listens only the elements the are loaded with the DOM and ignores the elements created dinamically.
The item in the select are created dinamically and added in the DOM after loading.

[m4r14n]

If you want to clear just one item from the selected items, but not from the select, you can use this:
$(document).on('click', 'div.selectize-input div.item', function(e) {
var select = $('#services').selectize();
var selectSizeControl = select[0].selectize;
// 1. Get the value
var selectedValue = $(this).attr("data-value");
// 2. Remove the option
select[0].selectize.removeItem(selectedValue);
// 3. Refresh the select
select[0].selectize.refreshItems();
select[0].selectize.refreshOptions();

});

[howardb3115]

I tried the on('click', function(e){...}); method that was suggested to add a click handler to the items in the selected items list, but the click/focus(?) handler hides the input control at the bottom of the list the first time the one of the list items is clicked, rather than firing the added click handler.

Here is the render: item function that I'm creating the items in the selected items list with:

   render : {
       item : function( data ) {
                   var message = 'Delete the “' +
                                            data.text     +
                                            '” category?';
                   var newOpt  = ( ( typeof( data.new ) === 'undefined' )
                                            ? 'false'
                                            : 'true' );

                   return '<div class="item ui-sortable-handle" ' +
                                      'data-group="' + data.optgroup     + '" '      +
                                      'data-value="' + data.value        + '" '      +
                                      'data-new="'   + newOpt            + '" '      +
                                      'title="Click to open list.">'                 +
                                   data.text + 
                              '</div>';
                 }
                }

Here is the code to add a click handler to the items created with the above code:

  $( 'div.item' ) 
  .click( function( event ) {
              askRemoveQuestion( this );
          } );

I originally used the item's onclick="askRemoveQuestion( this );" method, hoping that this might overwrite the event handler that caused the input area to disappear, but it, nor the .click( ... ) methods prevented the unwanted hiding of the input area.