3

私のフォームには、AJAX ポストバックを実行し、都市で別のドロップダウンをレンダリングする国のドロップダウン リストがあります。

イベントリスナーに割り当てられたテキストボックスフィールド phonenumber があります。デバッグ目的で、アラートメッセージボックスを画面にスローするだけです。

シナリオ 1

フォームが読み込まれると、国のドロップダウンがログインしているユーザーの国で事前に選択され、テキスト ボックス フィールドの 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 >
4

1 に答える 1

1

フォームが更新された後に電話番号の入力を追加しているようです。そのような場合は、イベントを委任することをお勧めします。

$(document).on('change' , '[id*="officePhone_txtInput"]', phoneNumberParser );
于 2012-11-26T17:26:30.213 に答える