在发出初始ajax请求后，Ajax请求无法发送 - 试图找出导致冲突的原因

Question

我有一个包含多种类型的ajax调用的表单。 - 一般表单更新，保存所有输入字段 - 每个字段上传 - 每次上传删除

每个字段和每个上传的ajax调用都是由单击的按钮的类名作为目标。因此页面中只有3个脚本。

每个脚本都有效。当页面加载新鲜时，我可以完成任何表单更新，字段上载或上传删除操作。

但是，在完成初始操作后，后续操作不起作用。

例：

如果单击“保存”按钮更新表单，则会导致按字段上载和按上载删除按钮不起作用。

如果我点击“每个字段”上传，上传工作，但然后我无法删除任何内容。

如果我点击“按上传”删除按钮，我将无法再上传任何内容。

但在每种情况下，我仍然可以单击“保存”来更新表单。

Here's a visual of how the page is set up:

将文件或图像上载到字段时，它将显示在字段标记内的容器div中。上传的资产带有“删除”按钮，允许用户删除上传。

Here's the basic html of the page

<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>

JS

页面中还有其他一些脚本，例如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>

Summary

同样，每次ajax请求在新页面加载后激活时都有效。但是在表单更新后或上传或删除后，上传和删除不再触发。

发生此故障时，“错误”回调不会在控制台中显示任何内容。

你在剧本的某个地方看到了冲突吗？也许脚本需要定义函数名？或者在每个脚本中返回的响应对象被称为“数据”是一个问题吗？

我没有长时间使用Ajax，所以我非常感谢你的帮助。我整天都在为此而奋斗。