所以我的webapp的非ajax版本很好,因为事件按我想要的顺序添加,所有事件都添加到相关的手机元素上。
但是对于我的ajax应用程序,由于元素是动态获取的,所以事件是“不同的”添加的,所以我有相同的事件但实际上在不同的元素上(在'#container'上检查动态添加的元素,并应用了一个蒙版直接在'.input-cell-phone')。
例如,当用户输入无效(215) - ### - ####时,我希望屏蔽输入在我的模糊代码之前清除它,但它没有。
这里基本上是'ajax'应用程序(好了减去ajax调用,我用.append模拟它):
http://jsfiddle.net/armyofda12mnkeys/9DGgF/
这是非ajax版本,其工作方式与我的期望相符:
http://jsfiddle.net/armyofda12mnkeys/XKf8d/2/
任何想法如何让这个工作?
答案 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('');
}
});
}
}
});