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

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

但是对于我的ajax应用程序，由于元素是动态获取的，所以事件是“不同的”添加的，所以我有相同的事件但实际上在不同的元素上（在’#container’上用于检查动态添加元素，并且直接应用于’ 。输入-手机“）。

例如，当用户类型无效（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(''); } }); } } });