動的に追加された要素とマスク入力プラグインのイベントの順序

Question

webappの非Ajaxバージョンは問題ありません。イベントが必要な順番で追加され、すべてのイベントがcell-phone要素に追加されます。質問。

私のajaxアプリケーションでは、要素が動的に取得されているため、イベントが「別々に」追加されるため、同じイベントが発生しますが、実際にはさまざまな要素（動的要素の追加を確認する '#container' 「.input-cell-phone」に直接適用されます）。

たとえば、ユーザーが無効な（215） - ### - ####を入力した場合、私はぼかしコードの前にマスク入力がそれをクリアすることを期待します。ここ は、「AJAX」アプリ（もマイナスAJAX呼び出しが、私は.appendでそれをシミュレートする）基本的には次のとおりです。
http://jsfiddle.net/armyofda12mnkeys/XKf8d/2/

：ここ
http://jsfiddle.net/armyofda12mnkeys/9DGgF/

は、私が期待するかのように働く非アヤックスバージョンです

これを動作させる方法はありますか？

Answer 1

私はこのように以下のようにしました。 私は入力に焦点を当てると、プラグインhas'ntが既に追加されている場合、私は動的にイベントを追加します。 アプリでイベントの注文に問題がありました。だから私は最初にマスクを追加し、次に私のぼかしイベントを追加することを確認します。

$('#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(''); 
       } 
      }); 
     } 
    } 
});