onchange事件偵聽器未在文本框上觸發

Question

我的表格有一個下拉列表，其中包含執行AJAX回發的國家/地區，並向城市提供另一個下拉列表。

我有一個文本框字段phonenumber已經分配了一個事件監聽器，出於調試目的，它只是向屏幕拋出一個警告消息框。

場景1

加載表單時，將使用登錄的用戶所在國家/地區預先選擇國家/地區下拉菜單，並且還會預先顯示文本框字段phonenumber。 然后我對這個phonenumber文本框進行了更改，每次彈出警報框。 即事件似乎一直在開火。

場景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 );