动态添加元素和屏蔽输入插件的事件顺序

Question

因此，我的webapp的非ajax版本没问题，导致事件按我想要的顺序添加，所有事件都添加到手机元素中题。

但是对于我的ajax应用程序来说，由于元素是动态获取的，因此事件会以不同的方式添加，所以我具有相同的事件但实际上在不同的元素上（'#container'用于检查动态添加的元素，直接应用于'.input-cell-phone'）。

例如，当用户输入invalid（215） - ### - ####时，我希望Masked Input在我的模糊代码之前清除它，但它没有。 这里基本上是“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(''); 
       } 
      }); 
     } 
    } 
});