AjaxSubmit 提交表单两次（或 3 次或 20 次）

Question

我是新来的，也是 JS 的新手:-) 我正在使用 AJAX SUBMIT (jquery) 将文件发送到我的 CDN。第一次 - 一切正常，文件已发送和接收。第二次：发送和接收文件，只有两次。第三次是三次等等…… 这是第二次的控制台：https://prnt.sc/tluygu 如您所见，它提交了两次。那是提交的代码：（它在模态中）

$(document).on('click', '.add-video-btn', function() {

  $('#file').val('');
  $('#file-upload').trigger('reset');

  $('#video-uploading-modal').modal({
    backdrop: 'static',
    keyboard: false
  });

  $('#upload-btn').on('click', async function() {

    var vidRes = await getOneTimeUploadUrl();
    console.log(vidRes.result.uploadURL);
    var oneTimeUrl = vidRes.result.uploadURL;
    $('#file-upload').ajaxSubmit({
      url: oneTimeUrl,
      beforeSubmit: function(formData, formObject, formOptions) {
        console.log(formData);
        $('.progress').slideDown();
      },
      beforeSend: function() {},
      uploadProgress: function(event, position, total, precentComplete) {
        $('.progress-bar').css('width', precentComplete + '%');
        $('.progress-bar').html('%' + precentComplete);

      },
      success: function(response) {
        console.log(response);
        alert('success');

      },
    });

  });

});

Answer 1

问题是每次打开模式时，都会添加一个新的提交侦听器。要解决您的问题，您需要拆分事件处理程序：

从模态点击侦听器开始：

$(document).on('click', '.add-video-btn', function() {

        $('#file').val('');
        $('#file-upload').trigger('reset'); 

        $('#video-uploading-modal').modal({
            backdrop: 'static',
            keyboard: false
        });
});

然后，单独设置提交监听：

        $('#upload-btn').on('click', async function() {

            var vidRes = await getOneTimeUploadUrl();
            console.log(vidRes.result.uploadURL);
            var oneTimeUrl = vidRes.result.uploadURL;

            $('#file-upload').ajaxSubmit({
                url: oneTimeUrl,
                beforeSubmit : function(formData, formObject, formOptions)  {
                    console.log(formData);
                    $('.progress').slideDown();
                },
                beforeSend : function() {
                },
                uploadProgress : function(event, position, total, precentComplete) {
                    $('.progress-bar').css('width', precentComplete + '%');
                    $('.progress-bar').html('%' + precentComplete);
                    
                },
                success: function(response) {
                    console.log(response);
                    alert('success');
                },
            });
        });

这应该可以解决您的问题。希望你觉得这有帮助。

AjaxSubmit 提交表单两次（或 3 次或 20 次）

AjaxSubmit submits form twice (or three times or 20 times)

javascript

ajax

jquery

cdn

cloudflare