javascript - 带有文件上传的 Jquery 表单 - onclick 而不是 dom 就绪

Question

 $("#form").submit(function() {
     $(this).ajaxSubmit({
         beforeSubmit: function(before) {
             $('.result').html('loading');
         },
         success: function(d) {
             //result process
         }
     }); 
     return false;
 });

当我单击提交按钮时，此功能效果很好。但是我想在按下按钮时提交表单。上面的函数写在side

 $(document).ready(function() {

但我想把它写在一个普通的javascript函数中。

我正在使用表单插件。form.min.js

Answer 1

好吧，然后订阅你的 DOM 元素的点击处理程序：

$(document).ready(function() {
    $('#myButton').click(function() {
        $("#form").ajaxSubmit(
            beforeSubmit: function(before) {
                $('.result').html('loading');
            },
            success: function(d) {
                //result process
            }
        );    
        return false;
    });
});

Answer 2

试试这个

<form action='' method='post' onsubmit='return uploadimg();'>

<script>
function uploadimg(){
    $(this).ajaxSubmit({
     beforeSubmit: function(before) {
         $('.result').html('loading');
     },
     success: function(d) {
         //result process
     }
 });
 return false;
} 

</script>

Answer 3

<button id="formSubmit">

将表单提交绑定到按钮单击事件应该像这样工作：

$('#formSubmit').on('click', function(){
    $('#form').ajaxSubmit({
         beforeSubmit: function(before) {
             $('.result').html('loading');
         },
         success: function(d) {
             //result process
         }
     }); 
     return false;
});

Answer 4

你几乎明白了，在 document.ready 中绑定的点就是准备读取 dom 的点，我们知道为 dom 元素设置事件处理程序是安全的，通常的做法是在你的 document.ready 中处理程序，您将绑定分配给您的元素，假设您有一个 ID 为“submitImageForm”的按钮，代码就像这样

$(function(){
  $("#submitImageForm").click(function(e){ // tell the browser we wanner handle the onClick event of this element
    e.preventDefault() // this is to tell the browser that we are going to handle things and it shod not do its default (e.g sending the form up to the server and reloading)

    $("#form").submit(function() {
      $(this).ajaxSubmit({
         beforeSubmit: function(before) {
             $('.result').html('loading');
         },
         success: function(d) {
         //result process
         }
     })

    })
  })
})