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

Question

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

F4k*_*k3d 2 html php ajax jquery form-submit

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

我的网站看起来像这样: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>

Run Code Online (Sandbox Code Playgroud)

在那个页面上,我使用的是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');       
        }
    }
});  
});

Run Code Online (Sandbox Code Playgroud)

如果您点击"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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

请帮我.

你的帮助是折旧的.

提前致谢.

Answer 1

Jay*_*ard 5

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	9 年，9 月前
查看次数：	535 次
最近记录：	9 年，9 月前