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