文本框的onchange事件监听器没有触发

Question

我的表单有一个下拉列表，其中包含国家，它执行 AJAX 回传并呈现另一个包含城市的下拉列表。

我有一个文本框字段电话号码，它已被分配了一个事件监听器，为了调试目的，它只是在屏幕上弹出一个警告框。

情况 1：

当表单加载时，国家下拉列表预先选择了登录用户的国家，并且文本框字段电话号码也已经预渲染。然后我对这个电话号码的文本框进行更改，每次都会弹出警告框。即该事件似乎一直在触发。

情况 2 - 问题所在：

在情况 1 后，如果用户更改了国家选择，就会发生 AJAX 回传，当表单完成呈现时，当我再次更改文本框电话号码时，事件不再触发，有什么想法吗？

代码： 事件监听器注册

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

代码变更

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

- Anil chakrahari

---

你似乎发送了Ajax请求，它在哪里？？你是在Ajax请求之后动态创建电话号码输入框吗？？ - Sushanth --

Answer 1

看起来你似乎在表单刷新后添加了电话号码输入.. 对于这种情况，最好使用 委托 事件。

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

- Sushanth --

---

@Anil似乎正在使用jQuery 1.3.2。不确定他是否可以使用.on()方法。 - Bruno

看起来他正在使用由 Google Cdn 托管的文件。他随时可以通过更改 URL 更新到最新版本。 - Sushanth --

同意。这是有道理的。 - Bruno