jquery가 입력 될 때 데이터를로드합니다 (클릭과 반대)

Question

내 웹 사이트의 한 섹션에서 고객에게 우편 번호와 국가를 요청합니다. 배송비는이 정보를 입력하고 링크 계산을 클릭하면 다른 페이지에서로드됩니다. 이제 클릭 버튼을 제거하고 싶습니다. 일단이 정보가 입력되면 사용자가 이미지로드 및 데이터로드를 즉시보고 싶습니다. 그게 가능성이 있는지, 그리고 어떤 예가 있는지 궁금합니다.

$(document).ready(function() { 
$("#link").click(function() { 
     $.ajax({ 
      type: "GET", 
      data: { PROCESS: "UPS", WEIGHT: "<%=Session("TotalWeight")%>", POSTALCODE: $(document.getElementsByName("ShippingPostalCode")).val(), COUNTRY: $(document.getElementsByName("ShippingCountry")).val() }, 
      url: "content/checkout/step1/index.cs.asp", 
      success: function(output) { 
      $("#sonuc").html(output); 
      $("#sonuc").css("display", "block"); 
      } 
     }); 
    }); 
}); 

빠른 업데이트! 고객이 나중에 사용할 수 있도록 주소를 저장할 수 있도록 허용했습니다. 주소가 저장된 경우 클릭 한 번으로 주소를 복사하여 붙여 넣을 수 있습니다.

function StoredData(){ 
    $.get("includes/ajaxfunctions.asp?Process=checkout1", { QUERY: $(document.getElementsByName("CUSTOMERDETAILNAME")).val() }, function(data){ 
     $("div.StoredData").html(data); 
    }); 
} 

---

$(document).ready(function() { 
    $("input[name=ShippingPostalCode]").livequery("change", function() { 
     $.ajax({ 
      type: "GET", 
      data: { PROCESS: "UPS", WEIGHT: "<%=Session("TotalWeight")%>", POSTALCODE: $(document.getElementsByName("ShippingPostalCode")).val(), COUNTRY: $(document.getElementsByName("ShippingCountry")).val() }, 
      url: "content/checkout/step1/index.cs.asp", 
      success: function(output) { 
       $("#sonuc").html(output); 
      } 
     }); 
    }); 
}); 

Answer 1

나는 당신의 StoredData 사업부는 이러한 입력 포함되어 있다고 가정 : 여기에 대한 코드입니다.

$("div.StoredData").html(data)을 쓰면 등록 된 이벤트 처리기가없는 입력 요소로 대체됩니다. 이벤트 핸들러를 할 때마다 이벤트 핸들러를 다시 등록해야합니다.

그렇게하는 가장 간단한 방법은 다음과 같이 jQuery의 LiveQuery 플러그인을 사용하는 것입니다

$("input[name=ShippingPostalCode]").livequery("change", /*your function*/); 

이 한 번로드에 실행하고 모든 것이 잘 작동합니다.

$("div.StoredData").html(data)을 실행 한 후 AJAX 콜백 후 핸들러를 다시 등록 할 수 있습니다.

마지막으로 AJAX 요청 (ajaxfunctions.asp?Process=checkout1)을 변경하여 데이터가 포함 된 HTML 대신 JSON으로 데이터를 반환하고 기존 요소의 값을 직접 업데이트 할 수 있습니다. 이것이 가장 빠른 솔루션입니다.

Answer 2

$(document.getElementsByName("ShippingPostalCode")).change(/*your function*/);