我有一个下拉菜单，每次选择一个选项时都会运行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 被注入(inject)到页面中并且不知道页面上已有哪些脚本？
<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('');
}
})
});
最佳答案
从您发布的代码看来，您可以将按钮处理委托(delegate)给 .ajaxResult 元素，该元素始终存在于 html 中(从初始加载) .
因此，只需更改绑定(bind)按钮处理程序的方式就足够了
$("#students").on("change", function (e) {
至
$('.ajaxResult').on('change', '#students', function (e) {
$('#statement_button').click(function (e) {
至
$('.ajaxResult').on('click', '#statement_button', function (e) {
等等..
<小时/>因此，包含上述代码的脚本会在页面初始加载时运行一次(在 $(document).ready(..) 中)
关于javascript - 包括 javascript 文件和 ajax 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46750438/