onchange 事件侦听器未在文本框上触发

Question

我的表单有一个包含国家/地区的下拉列表，该列表执行 AJAX 回发并呈现另一个包含城市的下拉列表。

我有一个文本框字段 phonenumber 已分配了一个事件侦听器，出于调试目的，它只是向屏幕抛出一个警报消息框。

场景 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="+44 (20) 8222-2662" maxLength=64 
      name=ctl00$ContentPlaceHolder1$officePhone$txtInput >

Answer 1

您似乎在刷新表单后添加了电话号码输入。对于这种情况，最好委托事件。

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