Порядок событий для динамически добавленных элементов и плагин Masked-Input

Question

Таким образом, версия myappapp без аякса прекрасна, поэтому события добавляются в том порядке, в котором я хочу, и все события добавляются в элемент сотового телефона в вопрос.

Но для моего приложения ajax события добавляются «по-другому», поскольку элементы динамически получаются, поэтому у меня есть те же события, но на самом деле на разных элементах (в «#container» для проверки динамических добавленных элементов и маски применяется непосредственно к «in-cell-phone»).

Например, когда пользовательские типы недействительны (215) - ### - ####, я ожидаю, что Masked Input очистит его перед моим кодом размытия, но это не так. Здесь в основном «Аякса» приложение (ну минус вызов Ajax, я имитировать его с .append):
http://jsfiddle.net/armyofda12mnkeys/9DGgF/

Вот не-Аякса версия, которая работает как как я ожидал:
http://jsfiddle.net/armyofda12mnkeys/XKf8d/2/

Любые идеи, как заставить это работать?

Answer 1

Я придумал это так, как показано ниже. поэтому, когда я фокусируюсь на вводе, я динамически добавляю событие, если плагин уже не был добавлен. В моем приложении возникла проблема с заказом событий. поэтому я уверен, что сначала добавлю маску, а затем мое размытие.

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