Question

每次选择一个选项时，我都会有一个运行AJAX的下拉列表。 ajax调用返回HTML标记（按钮和文本框）和脚本标记，HTML（按钮）用它通过ajax提交到数据库。

<html>
<head>........</head>
<body>........</body>
<select class="chooseOption">
...
...
</select>
<div class="ajaxResult">
<!-- after successful ajax -->
<!-- HTML Markup here -->
<!-- I'm having to include main.js here again so that HTML matkup can use AJAX -->
</div>
 ....
 ....
 ....
<footer> //include main.js </footer>

这种安排似乎只是正常，每次选择一个选项时都会对main.js进行指数调用。

做这样的事情（如下所示）似乎不起作用，我猜是因为AJAX被注入到页面中并且不知道页面上已经有哪些脚本？

<script>
var len = $('script').filter(function () {
    return ($(this).attr('src') == 'main.js');
}).length;

//if there are no scripts that match, the load it
if (len === 0) {
    var url = "main.js";
    $.getScript(url);
}
</script>

有一个简单的方法吗？要确保main.js适用于所有AJAX请求，而不必将其包含在每个请求中吗？

示例main.js内容。

填充HTML标记（按钮和文本框）的Ajax片段

    $("#students").on("change", function (e) {
    e.preventDefault();
    var supervise = this.value;
    var faculty = $("#faculty").val();
    $.ajax({
        method: "POST",
        url: 'URL',
        dataType: 'html',
        data:
        {
            selectValue: supervise,
            faculty: faculty
        },
        success: function (result) {
            $("#ajaxResult").html(result);
        }
    })
});

点击从选择下拉列表返回的HTML标记#statement_button时

    $('#statement_button').click(function (e) {
    var student_statement = $("#student_statement").val();
    if (student_statement == '') {
        alert('Please enter your statement');
        return false;
    }
    var student = $("#student").val();
    var statement_button = $(this).attr("value");

    $.ajax({
        type: "POST",
        url: formsUrl,
        dataType: 'text',
        data:
        {
            student_statement: student_statement,
            student: studentusername,
            statement_button: statement_button
        },
        success: function (result) {
            $("#result").text(result);
            $("textarea#student_statement").val('');
        }
    })
});

Answer 1

从您发布的代码看起来您可以将按钮处理委派给html中始终存在的.ajaxResult元素（来自初始加载）。

所以只需更改绑定按钮处理程序的方式就足够了

$("#students").on("change", function (e) {

到

$('.ajaxResult').on('change', '#students', function (e) {

$('#statement_button').click(function (e) {

到

$('.ajaxResult').on('click', '#statement_button', function (e) {

等。

所以带有上述代码的脚本在页面的初始加载中运行一次（{{1>} 中的）

包括javascript文件和ajax响应

示例main.js内容。

1 个答案: