单击提交按钮时,使用jquery/AJAX提交表单无效

我正在尝试使用jquery/AJAX提交表单,但是当我点击提交按钮时,我的函数永远不会被调用.

我的网站看起来像这样:CarMenu.php

   
   
   
   
   
   
   
   
   
   
   
   


   

      

         

            
Add car
            
Edit cars
         
 
      
      


      
      

    
  

在那个页面上,我使用的是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网站加载:

 

 

    

        

            
General Car Information
            
Car Descriptions
            
Picture Upload
        
        

    
   
        

    
   
        

    

   
    
    
 
 
    

这个网站只包含输入按钮,文件选择器等表单元素.

好吧,到目前为止一切顺利.一切都正常显示,但如果我点击提交按钮,则不会调用此函数: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;
    });

我不知道为什么这个函数永远不会被调用,我已经尝试了一切,我已经google了很多但我没有得到它.我整天都在寻找错误,但我看不到它.

请帮我.

你的帮助是折旧的.

提前致谢.

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

例如,此按钮已通过AJAX添加到DOM:

为了正确处理这个(如果它是唯一添加到页面的id的表单)是委派click或submit事件:

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

此外,如果您在此处显示时继续添加表单,则您的页面中将包含重复的ID,并且ID必须是唯一的.不使它们成为唯一将导致许多问题.

确保在此处概述的浏览器控制台中观看AJAX请求/响应,以查找并更正您可能遇到的错误.