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

【问题标题】：jQuery widget error: cannot call methods prior to initialization; attempted to call methodjQuery 小部件错误：无法在初始化之前调用方法；试图调用方法
【发布时间】：2019-07-01 08:01:45
【问题描述】：

我是编写自定义 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 函数？

【问题讨论】：

标签： javascript jquery widget

【解决方案1】：

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

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

这里有一个小提琴：

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

【讨论】：