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

Question

Так что не-ajax-версия моего веб-приложения в порядке, потому что события добавляются в том порядке, в котором я хочу, и все события добавляются в соответствующий элемент сотового телефона.

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

Например, когда пользователь вводит недопустимые (215) - ### - ####, я ожидаю, что замаскированный ввод очистит его перед моим кодом размытия, но это не так.Вот в основном приложение 'ajax' (хорошо, за исключением вызова ajax, я имитирую его с помощью .append):http://jsfiddle.net/armyofda12mnkeys/9DGgF/

Вот не-ajax-версия, которая работает так, как я ожидаю: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('');
                }
            });
        }
    }
});