Question

我正在使用ui-multiselect窗口小部件以不同方式呈现<select>列表。

我正在尝试引用我添加到窗口小部件的新功能，但它找不到引用。

我的新样式列表在页面上呈现正常，使用以下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>

然后我在窗口小部件的代码中添加了一个函数：

...
    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();
...

在我的javascript代码中，我想调用此函数，但我似乎无法获得正确的引用。这是我正在尝试的：

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

它没有在返回的对象上找到该函数。

Answer 1

尝试$('#MySelect').multiselect('myNewFunction')。

$('#MySelect')只为您提供DOM元素。 $('#MySelect').multiselect()应该为您提供小部件控件。

（我还没有使用过jQuery UI，但这似乎是其他问题的惯用语以及我见过的一些文档。）

Answer 2

您需要使用jquery扩展方法，以便jquery将该方法作为可行的扩展，如下所示。

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

你需要扩展多选。

启动here以获取更多信息

如何在页面上引用jQuery UI Widget并在其上调用函数？

2 个答案: