Sweetalert2 弹出窗口中的 JavaScript 代码无法正常工作

Question

我有一个 web 应用程序，前端使用基本的 HTML5，后端使用 Django。

在前端页面中，弹出一个甜蜜的警报。

但是弹出的甜蜜警报中的 JavaScript 代码无法正常工作。

Swal.fire({
  title: "title",
  html: "<br>" + "Course Code: " + "<select class=\"operator2\" style=\"width: 30%\" id=\"discipline_code_course_code\" name=\"discipline_code_course_code\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for code in query_results_code %}\n" +
    "                    <option value=\"{{ code.discipline_code }}{{ code.code }}\">{{ code.discipline_code }}{{ code.code }}</option>" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Commencing Semester: " + "<select style=\"width: 30%\" id=\"semester\" name=\"semester\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for semester in query_results_2.reverse %}\n" +
    "{% if forloop.counter > 3 %}\n" +
    "                    <option value=\"{{ semester.id }}\">{{ semester.slug }}</option>" +
    "{% endif %}\n" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Course Type: " + "<select style=\"width: 30%\" id=\"type\" name=\"type\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +

    "                    <option value=\"Part Time\">Part Time</option>" +
    "<option value=\"Full Time\">Full Time</option>" +
    "<option value=\"Part time & Full time\">Part time & Full time</option>" +
    "<select><script>$(\"#semester\").change(function(){   //pending220107\n" +
    "                alert('test');\n" +
    "                var code = $('#discipline_code_course_code').val();\n" +
    "                var semester = $(this).val();\n" +
    "\n" +
    "                $.ajax({\n" +
    "                    url: /con2/,\n" +
    "                    type: 'post',\n" +
    "                    data: {code:code, semester:semester},\n" +
    "                    dataType: 'json',\n" +
    "                    success:function(response){\n" +
    "                        alert(response);\n" +
    "                        console.log(response);\n" +
    "                        var len = response.length;\n" +
    "                        $(\"#type\").empty();\n" +
    "                        $(\"#type\").append('<option value=\"\" selected disabled hidden>--Select--</option>');\n" +
    "                        for( var i = 0; i<len; i++){\n" +
    "                            var id = response[i]['id'];\n" +
    "                            var type = response[i]['type'];\n" +
    "                            $(\"#type\").append(\"<option value='\"+type+\"'>\"+type+\"</option>\");\n" +
    "\n" +
    "                        }\n" +
    "                    }\n" +
    "                });\n" +
    "            });<\/script>",

  confirmButtonText: "Submit",
  showCancelButton: true,
  cancelButtonText: "Cancel"

})

为什么甜蜜警报中的 JavaScript 代码不起作用？

我在 JavaScript 代码中添加了：alert('test') ，但没有任何警报，这意味着 JavaScript 代码根本不运行。

JavaScript 代码可以在其他页面中很好地运行而不会弹出甜蜜的警报。

Answer 1

你在语法上有一些错误，正如 Luca Kiebel 在评论中所说的不包括 swal 的 html 中的 js 我做了一个工作小提琴https://jsfiddle.net/3nt1b4mc/你的警报正在改变

Swal.fire({
  title: "title",
  html: "<br>" + "Course Code: " + "<select class=\"operator2\" style=\"width: 30%\" id=\"discipline_code_course_code\" name=\"discipline_code_course_code\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for code in query_results_code %}\n" +
    "                    <option value=\"{{ code.discipline_code }}{{ code.code }}\">{{ code.discipline_code }}{{ code.code }}</option>" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Commencing Semester: " + "<select style=\"width: 30%\" id=\"semester\" name=\"semester\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +
    "                    {% for semester in query_results_2.reverse %}\n" +
    "{% if forloop.counter > 3 %}\n" +
    "                    <option value=\"{{ semester.id }}\">{{ semester.slug }}</option>" +
    "{% endif %}\n" +
    "                    {% endfor %}\n" + "<select>" + "<br>" +

    "Course Type: " + "<select style=\"width: 30%\" id=\"type\" name=\"type\">\n" +
    "                    <option value=\"\">--Select--</option>\n" +

    "                    <option value=\"Part Time\">Part Time</option>" +
    "<option value=\"Full Time\">Full Time</option>" +
    "<option value=\"Part time & Full time\">Part time & Full time</option>" +
    "</select>",
  //"Current Adopted Course Code: " + res.data.msg,
  confirmButtonText: "Submit",
  showCancelButton: true,
  cancelButtonText: "Cancel"

});
$("#semester").change(function(){
   alert('test');
   var code = $('#discipline_code_course_code').val();
   var semester = $(this).val();

   $.ajax({
        url: '/con2/',
       type: 'post',
        data: {code:code, semester:semester},
        dataType: 'json',
        success:function(response){
            alert(response);
            console.log(response);
            var len = response.length;
            $("#type").empty();
            $("#type").append('<option value="" selected disabled hidden>--Select--</option>');
           for( var i = 0; i<len; i++){
               var id = response[i]['id'];
                var type = response[i]['type'];
               $("#type").append("<option value='"+type+"'>"+type+"</option>");
            }
        }
    });
});

`