JQuery不處理Ajax表單提交

-1

我有一個表單，當提交時，將返回一個成功的消息和一個新的表單與一個新的ID。例如，您輸入一個郵政編碼來計算到某個區域的距離，然後一旦該表單被提交，就會出現一個更改框。JQuery不處理Ajax表單提交

$("#PostcodeForm").submit(function (e) { 
    e.preventDefault(); 
    $('#PostcodeError').text(" "); 
    $.ajax({ 
     type: "POST", 
     url: "/Scripts/Scripts.php", 
     data: {Type:"SavePostcode",Postcode:$('#Postcode').val(),Slug:"<?php if(isset($_GET['ID'])){echo $_GET['ID'];}else{echo "None";}?>"}, 
     success: function(response) { 
      if(response=="Error"){ 
       $('#PostcodeError').text("That postcode could not be found. Please use the entire postcode and try again."); 
      }else{ 
       $('#DistanceContent').slideUp("400", function() { 
        $('#DistanceContent').html(response).slideDown(); 
       }); 
      } 

     } 
    }); 
    return false(); 
}); 

$("#PostcodeChangeForm").submit(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "/Scripts/Scripts.php", 
     data: {Type:"ChangePostcode"}, 
     success: function(response) { 
      $('#DistanceContent').slideUp("400", function() { 
       $(this).html("Enter your postcode to see how far away this unit is!<br/><form method=\"post\" id=\"PostcodeForm\">Postcode: <input type=\"text\" name=\"Postcode\" id=\"Postcode\" maxlength=\"8\" /><input type=\"submit\" name=\"PostcodeSubmit\" id=\"PostcodeSubmit\" value=\"Calculate!\" /></form><span id=\"PostcodeError\"></span>").slideDown(); 
      }); 
     } 
    }); 
    return false(); 
});

提交的第一份中的反應是：

"6 miles, as the crow flies, from POSTCODE.<br/><form method=\"post\" id=\"PostcodeChangeForm\"><input type=\"submit\" name=\"PostcodeChange\" id=\"PostcodeChange\" value=\"Change the Postcode!\" /></form>

我原來的HTML代碼：

<div class="Widget DistanceWidget"> 
       <span class="Title">Distance:</span> 
       <span class="Content" id="DistanceContent"> 
       Enter your postcode to see how far away this unit is!<br/> 
        <form method="post" id="PostcodeForm"> 
         Postcode: <input type="text" name="Postcode" id="Postcode" maxlength="8" /> 
         <input type="submit" name="PostcodeSubmit" id="PostcodeSubmit" value="Calculate!" /> 
        </form> 
        <span id="PostcodeError"></span> 
       </span> 
      </div>

來源

2014-01-27 user2879284

請告訴我這個'返回false（）;'??刪除它，你已經防止Windows默認行爲調用'e.preventDefault（）;' –

什麼問題？你有什麼跡象表明有什麼不對？如果我想*猜測*我高度懷疑你從未將'submit'處理程序綁定到第二個表單。它看起來像是在頁面加載時試圖綁定一次處理程序，但該元素在用戶交互之後才存在。 – David

'return false（）'是防止事件發生的最有效方法嗎？預防一切。 – dfsq

你是一個Ajax響應後添加第二形式，元素是不當你綁定$("#PostcodeChangeForm").submit因此它不附加任何事件。添加表單時，您需要綁定該事件。或者你可以學習後

$(this).html("Enter..."); 
$("#PostcodeChangeForm").submit(function (e) { ...

或使用使用事件與on()

綁定冒泡：

$('#DistanceContent').on("submit", "#PostcodeChangeForm", function (e) { 
    /* code here 
});

來源

2014-01-27 13:46:54 epascarello

然後我如何綁定它？ – user2879284

給Ajax響應後綁定事件，只需使用$(document).on(...)Read here。

您可以使用這樣

$(document).on('submit', '#PostcodeChangeForm', function(e) { 
    e.preventDefault(); 

    //Your code 
    ... 
});

全碼：

$(document).on('submit', '#PostcodeChangeForm', function (e) { 
    e.preventDefault();  //Either use this or return false; 
    $.ajax({ 
     type: "POST", 
     url: "/Scripts/Scripts.php", 
     data: {Type:"ChangePostcode"}, 
     success: function(response) { 
      $('#DistanceContent').slideUp("400", function() { 
       $(this).html("Enter your postcode to see how far away this unit is!<br/><form method=\"post\" id=\"PostcodeForm\">Postcode: <input type=\"text\" name=\"Postcode\" id=\"Postcode\" maxlength=\"8\" /><input type=\"submit\" name=\"PostcodeSubmit\" id=\"PostcodeSubmit\" value=\"Calculate!\" /></form><span id=\"PostcodeError\"></span>").slideDown(); 
      }); 
     } 
    }); 
    return false();   //Either use this or e.preventDefault() 
});

來源

2014-01-27 14:05:33

JQuery不處理Ajax表單提交

回答

相關問題