动态添加元素和Masked-Input插件的事件顺序

时间:2012-03-30 16:01:07

标签: jquery events javascript-events maskedinput

所以我的webapp的非ajax版本很好,因为事件按我想要的顺序添加,所有事件都添加到相关的手机元素上。

但是对于我的ajax应用程序,由于元素是动态获取的,所以事件是“不同的”添加的,所以我有相同的事件但实际上在不同的元素上(在'#container'上检查动态添加的元素,并应用了一个蒙版直接在'.input-cell-phone')。

例如,当用户输入无效(215) - ### - ####时,我希望屏蔽输入在我的模糊代码之前清除它,但它没有。 这里基本上是'ajax'应用程序(好了减去ajax调用,我用.append模拟它):
http://jsfiddle.net/armyofda12mnkeys/9DGgF/

这是非ajax版本,其工作方式与我的期望相符:
http://jsfiddle.net/armyofda12mnkeys/XKf8d/2/

任何想法如何让这个工作?

1 个答案:

答案 0 :(得分: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('');
                }
            });
        }
    }
});