javascript - jQuery 小部件错误 : cannot call methods prior to initialization; attempted to call method

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');

这里有一个 fiddle :

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