0

私のWebアプリの非ajaxバージョンは問題ありません。イベントが必要な順序で追加され、すべてのイベントが問題の携帯電話要素に追加されるためです。

しかし、私のajaxアプリでは、要素が動的に取得されるため、イベントは「異なる方法で」追加されるため、同じイベントがありますが、実際には異なる要素にあります(#container動的に追加された要素をチェックするためにオンになり、マスクが直接適用されます.input-cell-phone)。

たとえば、ユーザーが無効な (215)-###-#### と入力すると、ぼかしコードの前にマスクされた入力がそれをクリアすることを期待していますが、そうではありません。これは基本的に「ajax」アプリです（ajax呼び出しを除いて、私はそれをシミュレートします.append）：
http://jsfiddle.net/armyofda12mnkeys/9DGgF/

これは、私が期待するように機能する非 ajax バージョンです:
http://jsfiddle.net/armyofda12mnkeys/XKf8d/2/

これを機能させる方法はありますか？

4

1 に答える 1

0

私は以下のようにそれを行うことを思いついた。したがって、入力に焦点を合わせると、プラグインがまだ追加されていない場合は、イベントを動的に追加します。アプリのイベントの順序に問題がありました。したがって、最初にマスクを追加してから、ぼかしイベントを追加するようにします。

$('#container').on('focusin', '.input-phone', function() {
    var $this = $(this);
    if( (typeof $this.data()['rawMaskFn'] !== "function") ) {
        //dynamically adds the mask plugin
        $this.mask("(999)-999-9999"); //probably adds a blur event

        //make sure its the first thing in blur event
        if($this.hasClass('input-cell-phone')) { //********* moved here so this blur event can get added after the above event

            $('.input-cell-phone').blur(function() {//on() way doesnt work here for some reason
                //if clear cell phone, make sure to clear daytime phone
                var phone_val = $.trim($(this).val());
                if(phone_val==""){
                    //find daytime equivilent and clear too
                    $(this).parents('.container').find('input.input-day-phone').val('');
                }
            });
        }
    }
});
于 2012-04-10T20:17:18.090 に答える