Слушатель события onchange не запускается в текстовом поле

Question

В моей форме есть раскрывающийся список со странами, которые выполняют обратную передачу AJAX и отображают еще один раскрывающийся список с городами.

У меня есть текстовое поле phonenumber, которое было назначено с прослушивателем событий, для целей отладки он выдает окно с предупреждением msg на экран.

Сценарий 1

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

Сценарий 2 - проблема

После сценария 1, если пользователь меняет выбор стран, возникает ajaxpostback, и когда форма заканчивает рендеринг, и когда я делаю другое изменение в телефонном номере текстового поля, событие больше не срабатывает, есть идеи, почему?

Код: регистрация слушателя событий

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener("change", phoneNumberParser, true);
        document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").addEventListener("change", triggerCountryChange);
        //alert(document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value);
        //$("ctl00_ContentPlaceHolder1_officePhone_txtInput").bind("onchange", phoneNumberParser);
    });
          </script>

onChange код

<script>
var selectedcountrycodeval;

    function triggerCountryChange() {


        //var phoneNumber = document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value;
        //alert(phoneNumber);
        //ctl00$ContentPlaceHolder1$country$cbInput_Input  country name input tag
        var regionCode = document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").value;
        alert(regionCode);
        regionCode = getCountry(regionCode);
        selectedcountrycodeval = regionCode;
        alert(regionCode);
        //document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener("change", phoneNumberParser);
        //alert(document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").addEventListener);
        //document.getElementById("ctl00_ContentPlaceHolder1_country_cbInput_Input").addEventListener("change", triggerCountryChange);
    }
    function phoneNumberParser() {

        alert(selectedcountrycodeval);
        var phoneNumber = document.getElementById("ctl00_ContentPlaceHolder1_officePhone_txtInput").value;
        alert(phoneNumber);
}
</script>

Значения формы

страна

<INPUT style="WIDTH: 220px" 
      id=ctl00_ContentPlaceHolder1_country_cbInput_Input 
      class=ComboBoxInput_WindowsXP tabIndex=1 value="United Kingdom" 
      name=ctl00$ContentPlaceHolder1$country$cbInput_Input></INPUT>

Телефон

<INPUT style="WIDTH: 221px" 
      id=ctl00_ContentPlaceHolder1_officePhone_txtInput class=inputTextBox 
      tabIndex=1 value="[phone]" maxLength=64 
      name=ctl00$ContentPlaceHolder1$officePhone$txtInput >

Answer 1

Похоже, вы добавляете ввод телефонного номера после обновления формы. В таких случаях лучше делегировать событие.

$(document).on('change' , '[id*="officePhone_txtInput"]', phoneNumberParser );