Question

我刚开始编写自定义jQuery小部件，并且不断收到错误消息“初始化之前无法在demowidget上调用方法；尝试在此代码上调用方法“ changeColor”。

$.widget('my.demowidget', {
    _create: function () {
        this.element.on('change', 'select[name="color"]', function () {
            $(this).demowidget('changeColor');
        });

        this.createContent();
    },

    createContent: function () {
        var html = '';
        html += '<select name="color">';
        html += '<option value="green">Green</option>';
        html += '<option value="red">Red</option>';
        html += '</select>';
        html += '<div id="the-text">The text</div>';

        this.element.html(html);
    },

    changeColor: function() {
        $('#the-text').css('color', '#' + $('select[name="color"]'));
    }
});

$(document).ready(function () {
    $('#demo').demowidget();
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="demo">
</div>

如何解决此问题，以便select-change事件触发changeColor函数？

Answer 1

您可以在尝试调用函数之前初始化小部件：

$(this).demowidget().demowidget('changeColor');

这里有个小提琴：

https://jsfiddle.net/mnfjtdz0/1/

jQuery小部件错误：无法在初始化之前调用方法；尝试调用方法

1 个答案: