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

【问题标题】：Order of events for dynamically added elements and Masked-Input plugin动态添加元素和 Masked-Input 插件的事件顺序
【发布时间】：2012-03-30 16:01:06
【问题描述】：

我的网络应用程序的非 ajax 版本很好，因为事件是按我想要的顺序添加的，并且所有事件都添加到有问题的手机元素上。

但是对于我的 ajax 应用程序，由于元素是动态获取的，因此事件是“不同”添加的，所以我有相同的事件，但实际上在不同的元素上（在 #container 上用于检查动态添加的元素，以及直接应用的掩码在.input-cell-phone)。

例如，当用户键入无效 (215)-###-#### 时，我希望 Masked Input 在我的模糊代码之前将其清除，但事实并非如此。这里基本上是 'ajax' 应用程序（减去 ajax 调用，我用 .append 模拟它）：
http://jsfiddle.net/armyofda12mnkeys/9DGgF/

这是非 ajax 版本，其工作方式与我预期的一样：
http://jsfiddle.net/armyofda12mnkeys/XKf8d/2/

任何想法如何让它工作？

【问题讨论】：

标签： jquery events jquery-events maskedinput

【解决方案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('');
                }
            });
        }
    }
});

【讨论】：