javascript - Selectize.js-händelser - fungerar inte


Jag behöver lite hjälp med selectize.js-händelser - de fungerar inte...

Initiera selectize.js:

$("input[name='addTask[users]']").selectize({

    valueField: 'email',
    labelField: 'name',

    //... more options like render... 

});

Och inställning händelse:

$("input[name='addTask[users]']").selectize().on('type', function(){
    alert();
});

Om jag skriver i inmatningen händer inget...

REDIGERA: Inga fel i konsolen, väljaren är bra eftersom plugin fungerar perfekt.

Endast ett evenemang fungerar för mig - "change".

Här är dokumentationen: https://github.com/brianreavis/selectize.js/blob/master/docs/events.md (Jag förstår också inte "params" - vad behoven är och vad de gör)

Några tips, idéer? Exempel, det behagar mig...

REDIGERA: OKEJ JAG FÖRSTÅR!!! SÅ - LÖSNING:

Vid initialisering av selectize.js:

$("input[name='addTask[users]']").selectize({

    valueField: 'email',
    labelField: 'name',

    onType : eventHandler('onType'), // <----- this added

    //... more options like render... 

});

och INNAN initialisering:

var eventHandler = function(name) {
    return function() {
        alert(name + ' ' + arguments['0']);  // name of event + typed string
    };
};

Och varning fungerar om du börjar skriva i inmatningen :)

Svar #1

Ditt problem finns på den här raden:

$("input[name='addTask[users]']").selectize().on('type', function(){
    alert();
});

Du borde ha gjort:

$("input[name='addTask[users]']")[0].selectize.on('type', function(){
    alert();
});

Från dokumentationen: När kontrollen initieras, läggs egenskapen "selectize" till på det ursprungliga /-elementet—denna egenskap pekar på den underliggande Selectize-instansen.

// initialize the selectize control
var $select = $('select').selectize(options);

// fetch the instance
var selectize = $select[0].selectize;

Och händelsedokument: Selectize-instansar har ett grundläggande gränssnitt för händelsesändning som efterliknar jQuery, Backbone.js, etc:

var handler = function() { /* ... */ };
selectize.on('event_name', handler);
selectize.off('event_name');
selectize.off('event_name', handler);