物化CSS选择更新错误答案

【问题标题】：Materialize CSS Select update error物化CSS选择更新错误
【发布时间】：2018-04-09 07:53:30
【问题描述】：

您好 StackOverflow 和其他开发人员... 所以。我真的很喜欢 Materialize CSS，但它有时会引起我的注意。我的网站上有一些选择元素，非常好，并且初始化工作正常并显示出来。然后我有另一个函数来填充选择，根据 Materialize 文档，我应该再次运行$('select').material_select();。不幸的是，当我第二次尝试调用该函数时，我收到错误Uncaught TypeError: $(...).material_select is not a function。

我不明白为什么我刚刚在文档就绪函数中调用了该函数？

页面的 JS 捆绑包：

块引用

$(document).ready(function () {
    // This works fine and as expected my Selects are rendered perfect
    $('select').material_select();
    fetchSoftware();
    getusersinit();
});

var fetchSoftware = function fetchSoftware() {
    $.ajax({
        type: "Get",
        url: "Dashboard/GetSoftwares",
        data: { userName: "*****" },
        success: function success(softwares) {
            console.log(softwares);
            $("#softwareSelectDefault").remove();
            Object.keys(softwares).forEach(function (key) {
                $("#softwareSelect").append("<option>" + softwares[key] + "</option>");
            });
            //Down here shit falls apart. This doesen't work
            $('select').material_select();
        },
        error: function error(errorMessage) {
            //window.location.href = "/account/signin";
        }
    });
};

var getusersinit = function getusersinit() {
    $.ajax({
        type: "Get",
        url: "***********",
        data: { userName: "**********" },
        success: function success(reports) {
            console.log(reports);
            $(".progress").remove();
            Object.keys(reports).forEach(function (key) {
                $("#******").append("<tr id=\"" + reports[key].id + "\"><td><i class=\"medium material-icons\">" + reports[key].locked + "</i></td><td><i class=\"medium material-icons\">" + reports[key].status + "</i></td><td>" + reports[key].user + "</td><td>" + reports[key].script + "</td><td>" + reports[key].software + "</td><td>" + reports[key].testBench + "</td><td>" + reports[key].repository + "</td><td>" + reports[key].executionTime + "</td><td>" + reports[key].startDate + "</td></tr>");
            });
        },
        error: function error(errorMessage) {
            window.location.href = "/account/signin";
        }
    });
};

2018 年 10 月 4 日更新
所以，在昨天花了几乎整个工作日处理这个问题之后，我现在离解决方案更近了一点。我发现了一件非常奇怪的事情。显然，问题在于我的 ajax 调用。我有一个理论，它取决于 url 或回复。

$(document).ready(function () {
    //fetchSoftware works. If i run getuserinit it does not. Then material_select doesen't exist
    fetchSoftware();
});

var fetchSoftware = function fetchSoftware() {
    $.ajax({
        type: "Get",
        url: "https://jsonplaceholder.typicode.com/posts/1",
        data: { userName: "XXXXXX" },
        success: function (result) {
            $("#testReports").append(`<tr><td>TEST</td></tr>`);
            $("#softwareSelect").append(`<option>Test Option</option>`);
            $('#softwareSelect').material_select();
        },
        error: (errorMessage) => {
            window.location.href = "/account/signin";
        }
    });
};
var getusersinit = function getuserinit() {
    $.ajax({
        type: "Get",
        url: "Dashboard/LoadTable",
        data: { userName: "XXXXXX" },
        success: function (result) {
            $("#testReports").append(`<tr><td>TEST</td></tr>`);
            $("#softwareSelect").append(`<option>Test Option</option>`);
            $('#softwareSelect').material_select();
        },
        error: (errorMessage) => {
            window.location.href = "/account/signin";
        }
    });
};

【问题讨论】：

在调用select js函数之前，确保你已经调用了materialize js file。
什么意思？ :) 在我的 HTML 文件中，我确实在我自己的 js 之前引用了物化文件 :)
你需要包含 jquery min 文件 -> materialze js 文件 -> 你的自定义选择 js
已经可以了，jquery可以很好的引用:)
它适用于我codepen.io/titan_dl_1904/pen/BrMdqx

标签： javascript jquery html materialize

【解决方案1】：

formSelect() 是新方法。

使用selectSoftware.formSelect(); 代替material_select()

【讨论】：

我发现了。我刚刚在他们发布了一个稳定的新版本后更新了 Materialize :)

【解决方案2】：

我解决了这个问题，尽管它是一种解决方法。将选择放入变量中...

/*
These constant are created because of an unsolved issue:
See https://stackoverflow.com/questions/49728000/
By putting the selects into constants, and only referencing the constants,
this is a workaround.
*/
var selectSoftware = $('#softwareSelect');

$(document).ready(function () {
    selectSoftware.material_select();
    getSoftware();
});

var getSoftware = function getSoftware() {
    $.ajax({
        type: "Get",
        url: "Dashboard/GetSoftwares",
        data: { userName: "XXXXXXX" },
        success: function success(softwares) {
            console.log(softwares);
            $("#softwareSelectDefault").remove();
            Object.keys(softwares).forEach(function (key) {
                $("#softwareSelect").append("<option>" + softwares[key] + "</option>");
            });
            selectSoftware.material_select();
        },
        error: function error(errorMessage) {
            //window.location.href = "/account/signin";
        }
    });
};

【讨论】：