单击提交按钮时，使用 jquery/AJAX 提交表单不起作用

我正试图用jquery/AAJAX提交表单，但当我单击提交按钮时，我的函数从未被调用。

我的网站是这样的：CarMenu.php

<html lang="en">
<html>
<head>
   <meta charset="ISO-8859-1">
   <title>ArsenalAutoBrokers - Backend - add car</title>
   <link rel="stylesheet" href="../js/jquery-ui-1.11.4/jquery-ui.min.css"     type="text/css"/>
   <link rel="stylesheet" href="../js/jquery-ui-1.11.4/jquery-ui.css" type="text/css"/>
   <link rel="stylesheet" href="../js/jquery-ui-1.11.4/jquery-ui.theme.css" type="text/css"/>
   <link rel="stylesheet" href="../js/jquery-ui-1.11.4/jquery-ui.structure.css" type="text/css"/>
   <link rel="stylesheet" href="../css/carForm.css" type="text/css"/>
   <script charset="UTF8" src="../js/jquery/jquery-1.11.3.js"></script>
   <script charset="UTF8" src="../js/jquery-ui- 1.11.4/external/jquery/jquery.js"></script>
   <script charset="UTF8" src="../js/jquery-ui-1.11.4/jquery-ui.js"></script>
   <script charset="UTF8" src="../js/app/carForm.js"></script>
   <script charset="UTF8" src="../js/app/addCar.js"></script>
</head>
<body>
   <div id="container">
      <div id="leftMenuContainer">
         <ul id="menu">
            <li id="addCarItem">Add car</li>
            <li id="saveCarItem">Edit cars</li>
         </ul> 
      </div>
      <div id="rightMainContent">
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

在该页面上，我使用jquery菜单，并将数据加载到id为"rightMainContent"的div中。

执行此操作的javascript代码看起来像：carForm.js

$(document).ready(function () {
   $( "#menu" ).menu({
    select: function(event, ui) {
        if (ui.item.attr('id') === 'addCarItem') {
           $("#rightMainContent").load(
             '/CarDealer/CarForm/CreateCar/AddCar.php');       
        }
    }
});  
});

如果你点击"addCar"菜单项，部分网站将从这个php网站加载：

 <script type="text/javascript">
 $('input[type=submit]').button();
 //$('#activeCheck').button();
 $("#activeCheck").attr('checked','checked');
 $('#saveButton').hide();
 $('#tabs').tabs();
 $('#accordion' ).accordion({heightStyle: "content"});
 $('#tabs').tabs({
     activate: function (event, ui) {
         var act = $("#tabs").tabs("option", "active");
         if (act == 0 || act == 1) {
            $('#saveButton').hide();
         } else {
            $('#saveButton').show();
         }
     }
 });  
 $('#fileToUpload').on('change', function(){ 
   var fileSelect = document.getElementById('fileToUpload');
   var files = fileSelect.files;
   if (files.length > 10) {
     $('.info').html('The file upload is limited to <font color="red"><b>10 pictures per car</b></font>.<br>Only the 1st ten pictures will be stored.');
     $('.info').show();
   } else {
        $('.info').html('');
     $('.info').hide();
   }
 });
 </script>
 <form id="carSaveForm"
    action="/CarDealer/CarForm/CreateCar/CarCreation.php" method="POST"
    enctype="multipart/form-data">
    <div id="tabs">
        <ul>
            <li><a href="#tabsGen">General Car Information</a></li>
            <li><a href="#tabsDescr">Car Descriptions</a></li>
            <li><a href="#tabsPics">Picture Upload</a></li>
        </ul>
        <div id="tabsGen">
    <?php include($_SERVER['DOCUMENT_ROOT']."/CarDealer/CarForm/CreateCar/carGeneralData.php"); ?>
   </div>
        <div id="tabsDescr">
    <?php include($_SERVER['DOCUMENT_ROOT']."/CarDealer/CarForm/CreateCar/carDescriptions.php"); ?>
   </div>
        <div id="tabsPics">
    <?php include($_SERVER['DOCUMENT_ROOT']."/CarDealer/CarForm/CreateCar/PictureUpload.php"); ?>
   </div>
    </div>
    <br> <input id="saveButton" type="submit" name="submit" value="save" />
 </form>

这个网站只包含表单元素，如输入按钮、文件选择器等。

嗯，到目前为止还不错。一切都显示正常，但如果我点击提交按钮，则不会调用此函数：addCar.js

$('#carSaveForm').on('submit', function(event){
        event.preventDefault();
        var formData = new FormData();
        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        formData.append('carBrand'               , $('input[name=carBrand]').val());
        formData.append('carModelYear'           , $('input[name="carModelYear"]').val());
        formData.append('carModel'               , $('input[name=carModel]').val());
        formData.append('carTrim'                , $('input[name="carTrim"]').val());
        formData.append('carDriveTrain'          , $('input[name="carDriveTrain"]').val());
        formData.append('carCondition'           , $('input[name="carCondition"]').val());
        formData.append('carType'                , $('input[name="carType"]').val());
        formData.append('carFuelType'            , $('input[name="carFuelType"]').val());
        formData.append('carTransmission'        , $('input[name="carTransmission"]').val());
        formData.append('carEngine'              , $('input[name="carEngine"]').val());
        formData.append('carCylinder'            , $('input[name="carCylinder"]').val());
        formData.append('carMileage'             , $('input[name="carMileage"]').val());
        formData.append('carExteriorColor'       , $('input[name="carExteriorColor"]').val());
        formData.append('carInteriorColor'       , $('input[name="carInteriorColor"]').val());
        formData.append('carLocation'            , $('input[name="carLocation"]').val());
        formData.append('carVin'                 , $('input[name="carVin"]').val());
        formData.append('carStock'               , $('input[name="carStock"]').val());
        formData.append('carPrice'               , $('input[name="carPrice"]').val());
        formData.append('carPriceDetails'        , $('input[name="carPriceDetails"]').val());
        formData.append('carTax'                 , $('input[name="carTax"]').val());
        formData.append('carTaxDetails'          , $('input[name="carTaxDetails"]').val());
        formData.append('carCurrency'            , $('input[name="carCurrency"]').val());
        formData.append('carOnline'              , $('input[name="carOnline"]').val());
        formData.append('carDescr'               , $('input[name="carDescr"]').val());
        formData.append('carBodyDescr'           , $('input[name="carBodyDescr"]').val());
        formData.append('carDriveTrainDescr'     , $('input[name="carDriveTrainDescr"]').val());
        formData.append('carExteriorDescr'       , $('input[name="carExteriorDescr"]').val());
        formData.append('carElectronicsDescr'    , $('input[name="carElectronicsDescr"]').val());
        formData.append('carSaftyFeaturesDescr'  , $('input[name="carSaftyFeaturesDescr"]').val());
        formData.append('carSpecialFeaturesDescr', $('input[name="carSpecialFeaturesDescr"]').val());
        var fileSelect = document.getElementById('fileToUpload');
        var files = fileSelect.files;
        // Loop through each of the selected files.
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          // Add the file to the request.
          formData.append('files[]', file, file.name);
        }
        // process the form
        $.ajax({
           type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
           url         : '/CarDealer/CarForm/createCar/carCreation.php', // the url where we want to POST
           data        : formData, // our data object
           contentType: false,
           processData: false,
           success: function (data) {
               $('.success').fadeIn(200).show();
               $('.error').fadeOut(200).hide();
           },
           error: function (data) {
               $('.success').fadeIn(200).hide();
               $('.error').fadeOut(200).show();
           }
        });
        return false;
    });

我不知道为什么这个函数从来没有被调用过，我已经尝试了所有的东西，我在谷歌上搜索了很多，但我没有得到它。我整天都在搜索错误，但我看不到它。

请帮帮我。

感谢你的帮助。

提前谢谢。

jQuery在运行时只知道页面中的元素，因此添加到DOM中的新元素无法被jQuery识别。为了解决这种使用事件委派的问题，将事件从新添加的项冒泡到页面加载jQuery时DOM中的某个点。许多人使用document作为捕捉冒泡事件的地方，但没有必要在DOM树上走那么高。理想情况下，您应该委托给页面加载时存在的最近的父级。

例如，这个按钮已经通过AJAX添加到DOM中：

<input id="saveButton" type="submit" name="submit" value="save" />

为了正确处理此问题（如果它是唯一一个将此id添加到页面的表单），请委托点击或提交事件：

$(document).on('click', '#saveButton', function(event) {...

此外，如果您继续添加此处显示的表单，您的页面中将有重复的id，并且id必须是唯一的。如果不能使它们独一无二，将会导致许多问题。

请确保在浏览器控制台中查看AJAX请求/响应，如本文所述，以查找并更正您可能遇到的错误。

将$('#carSaveForm').on('submit', function(event)更改为$('#carSaveForm').on('click','#saveButton', function(event)

从CarMenu.php 中剪切（ctrl+x）此行

<script charset="UTF8" src="../js/app/addCar.js"></script>

并在AddCar.php 中粘贴（ctrl+v）脚本

相关内容

最新更新

热门标签：