YUI doesn't fire on.change when using bootstrap multiselect

Question

I'm in a position where I am having to use jQuery and YUI within the same project. I am using Bootstrap multiselect - http://davidstutz.github.io/bootstrap-multiselect/

I am trying the below YUI code:

this.level1 = this.Y.one("#menu");
this.level1.on('change',this.getAjax,this);

Now, this works when the dropdown menu is NOT Multiselect enabled. Once it is, getAjax is not fired.

Any ideas? I'm guessing (from Google Inspect) the actual menu is not being changed?

When I try to use jQuery to see if something has changed, I can get it to work but get an error when trying to run getAjax()

$('#menu').on('change', function(evt, params){
    this.getAjax();
}

Error is

this.getAjax is not a function(…)

Larger snippet of code

constructor: function() {

    $('#menu').on('change', function(evt, params){
        this.getAjax();
    });

},

/**
 * Sample widget method.
 */
methodName: function() {

},

/**
 * Makes an AJAX request for `default_ajax_endpoint`.
 */
 getAjax: function() {

So I can see if it changes via jQuery but how would I then call getAjax?

Answer 1

You can't access in this from any event because that time "this" is referenced to your item, hence you should use below

constructor: function() {
var $this = this;
$('#menu').on('change', function(evt, params){
    //this.getAjax();//this is your '#menu' item
    $this.getAjax();
});

    },

    /**
     * Sample widget method.
     */
    methodName: function() {

    },

    /**
     * Makes an AJAX request for `default_ajax_endpoint`.
     */
     getAjax: function() {