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 содержит эти входные данные.

Написав $("div.StoredData").html(data), вы заменяете входы, для которых зарегистрированы обработчики событий, новыми элементами ввода, которые этого не делают. Вам нужно перерегистрировать обработчики событий каждый раз, когда вы делаете это.

Самый простой способ сделать это - использовать плагин jQuery LiveQuery , например:

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

Запустите это один раз при загрузке, и все должно работать нормально.

В качестве альтернативы, вы можете перерегистрировать ваши обработчики после обратного вызова AJAX, после запуска $("div.StoredData").html(data).

Наконец, вы также можете изменить свой AJAX-запрос (ajaxfunctions.asp?Process=checkout1), чтобы он возвращал данные в виде JSON вместо HTML, содержащего данные, и обновлял значения существующих элементов самостоятельно. Это самое быстрое решение.

Answer 2

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