实现CSS选择更新错误

Question

嗨，StackOverflow和其他开发人员……所以。 我真的很喜欢Materialise 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"; } }); }; 

更新10-04-2018
因此，在昨天几乎整个工作日都花在这个问题上之后，我现在已经接近解决方案了。 我发现了一些很奇怪的东西。 显然，问题出在我的ajax调用中。 我有一个理论，它取决于网址或回复。

 $(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"; } }); }; 

Answer 1

formSelect（）是新方法。

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

Answer 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"; } }); };