JQuery가 아약스 양식 제출을 처리하지 않습니다.

Question

양식을 제출하면 성공 메시지와 새 ID가있는 새 양식이 반환됩니다. 예를 들어 우편 번호를 입력하여 특정 지역과의 거리를 계산 한 다음 해당 양식을 제출하면 변경 상자가 나타납니다.

$("#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 코드는 다음과 같습니다 당신은 Ajax 응답 후 두 번째 양식을 추가

<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> 

Answer 1

는 요소는 아니다 거기에 $("#PostcodeChangeForm").submit을 바인딩하면 이벤트가 연결되지 않습니다. 양식을 추가 할 때 해당 이벤트를 바인드해야합니다. 또는 당신은

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

또는에 사용 후 on()

바인딩과 이벤트 버블 링을 사용하는 방법을 배우게 할 수 있습니다

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

Answer 2

은 $(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() 
});