我有一个包含多种类型的ajax调用的表单。 - 一般表单更新，保存所有输入字段 - 每个字段上传 - 每次上传删除
每个字段和每个上传的ajax调用都是由单击的按钮的类名作为目标。因此页面中只有3个脚本。
每个脚本都有效。当页面加载新鲜时，我可以完成任何表单更新，字段上载或上传删除操作。
但是，在完成初始操作后，后续操作不起作用。
例：
如果单击“保存”按钮更新表单，则会导致按字段上载和按上载删除按钮不起作用。
如果我点击“每个字段”上传，上传工作，但然后我无法删除任何内容。
如果我点击“按上传”删除按钮，我将无法再上传任何内容。
但在每种情况下，我仍然可以单击“保存”来更新表单。
将文件或图像上载到字段时，它将显示在字段标记内的容器div中。上传的资产带有“删除”按钮，允许用户删除上传。
<form id = "form" action = "/process.php" method = "post">
<div class="field">
<label class="field-label">
<span class="field-label-text">Upload 1</span>
<input type="file" data-name="answer1" name="files_answer1[]" />
</label>
<!-- destination for ajax response messages -->
<div id="ajax-message-answer1" class="ajax-field-message"></div>
<!-- upload button -->
<button type="button" class="ajax-button" data-field="answer1" data-type="files">Upload</button>
<!-- container div for uploads -->
<div class="assets" id="assets-answer1">
<div class="asset file">
<a href="<file path>">Name of file</a>
<label class="asset-action">
<!-- deletion button to remove asset -->
<button type="button" data-asset="asset1" data-parent="answer1" class="ajax-delete" value="asset1" onclick="return confirm('You are about to delete this item. Press OK to proceed.')">Delete</button>
</label>
</div><!-- .asset.file -->
</div><!-- .assets -->
</div><!-- .field -->
.... more fields of the same kind ...
<button type = "submit" id = "save">Save</button>
</form>
页面中还有其他一些脚本，例如jQuery，jQuery UI，Bootstrap，以及一些用于生成slug等的自定义脚本。但我认为这些都不应该归咎于因为问题开始时我才开始运行页面中有一个Ajax请求。这是JS：
<script type="text/javascript">
$(document).ready(function() {
// process form
$('#form').submit(function(eform) {
// stop regular form submission
eform.preventDefault();
// set variables
var form = $('#form');
// serialize form data
var fdform = form.serializeArray();
// make request
$.ajax({
url: '/account/ajax.php',
type: 'post',
data: $.param(fdform),
dataType: 'json',
success: function(data) {
// get URL for redirect if supplied
if (data.redirect) {
window.location.href = data.redirect;
} else {
// replace with updated template from response
$('#form').html(data.html);
// place template js in specified div
$('#ajax-js').html(data.js);
}
},
error: function(report) {
console.log(report.responseText);
}
});
}); // .click
}); // .ready
</script>
<script>
$(document).ready(function() {
$(".ajax-button").click(function() {
var fdUpload = new FormData();
// get field info from the clicked button
var field = $(this).data('field');
var uploadType = $(this).data('type');
var input = $('#' + field)[0];
var container_id = '#assets-' + field;
var button_id = '#button-' + field;
// add each file to uploads array
$.each(input.files, function(i, upl) {
// add each file to target element in fdUpload
fdUpload.append(uploadType + '[]', upl);
});
// make request
$.ajax({
url: '/account/ajax.php',
type: 'post',
data: fdUpload,
dataType: 'json', // returns success(data) as object
contentType: false,
processData: false,
success: function(data) {
// put received html in container
$(container_id).html(data.html);
// put received js in #ajax-js
$('#ajax-js').append(data.js);
// clear file input after upload completes
input.value = '';
if (!/safari/i.test(navigator.userAgent)) {
input.type = '';
input.type = 'file';
}
},
error: function(report) {
console.log(report.responseText);
}
});
});
});
</script>
<script>
$(document).ready(function() {
$(".ajax-delete").click(function() {
var fdDelete = new FormData();
// get asset info from clicked button
var asset = $(this).data('asset');
var parent = $(this).data('parent'); // answer
var container_id = '#assets-' + parent;
var button_id = '#delete-' + asset;
var message_id = '#ajax-message-' + asset;
// make request
$.ajax({
url: '/account/ajax.php',
type: 'post',
data: fdDelete,
dataType: 'json',
contentType: false,
processData: false,
success: function(data) {
// put received html in container
$(container_id).html(data.html);
// put received js in #ajax-js
$('#ajax-js').html(data.js);
// retrieve and display response status
$(message_id).html(data.status);
$(message_id).addClass('show');
},
error: function(report) {
console.log(report.responseText);
}
});
});
});
</script>
同样，每次ajax请求在新页面加载后激活时都有效。但是在表单更新后或上传或删除后，上传和删除不再触发。
发生此故障时，“错误”回调不会在控制台中显示任何内容。
你在剧本的某个地方看到了冲突吗？也许脚本需要定义函数名？或者在每个脚本中返回的响应对象被称为“数据”是一个问题吗？
我没有长时间使用Ajax，所以我非常感谢你的帮助。我整天都在为此而奋斗。
您正在使用$(".ajax-...").click(...)，但在ajax成功处理程序中，您正在更新容器的HTML代码，从而丢失此容器中元素的任何附加点击处理程序。
如果您切换到使用$("#form").on('click', '.ajax-...', ...)，那么即使直接替换HTML，您也会捕获点击事件。