How can I reference a jQuery UI widget on a page and call a function on it?

Question

I use the ui-multiselect widget to display the list <select>in different ways.

I am trying to link to a new function that I added to the widget but did not find the link.

My new style is displayed on the page using the following HTML:

<select class="multiselect" id="MySelect" multiple="multiple" name="MySelect">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>

Then I added a function to the code for the widget:

...
    destroy: function() {
        this.element.show();
        this.container.remove();

        $.widget.prototype.destroy.apply(this, arguments);
    },
    myNewFunction: function() {
        alert('hello world');
    },
    _populateLists: function(options) {
        this.selectedList.children('.ui-element').remove();
...

In my javascript code, I want to make a call to this function, but it seems like I cannot get the correct link. Here is what I am trying:

$('#MySelect').myNewFunction();

It does not find this function for the returned object.

Answer 1

Give it a try $('#MySelect').multiselect('myNewFunction').

$('#MySelect') DOM. $('#MySelect').multiselect() .

( jQuery UI, , , , ).

Answer 2

jquery , jquery , - .

$.multiselect.fn.extend({
    myNewFunction()
});

.

,