浮動標籤不工作jQuery的移動1.4.4

Question

我試圖做一個浮動標籤浮動當你點擊輸入。我使用CSS和jQuery（這是在jQuery的移動1.4.4平臺）。我的代碼似乎只能處理一個數據角色爲「none」的輸入，並且它不適用於正常輸入。我怎樣才能使這項工作正常輸入？

這是我的CSS：

.inputAnimation { 
    display: inline-block; 
    position: relative; 
    margin: 0 0px 0 0; 
} 


.inputAnimation label { 
    position: absolute; 
    top: 5px; 
    left: 15px; 
    font-size: 12px; 
    color: #aaa; 
    transition: .1s all linear; 
    cursor: text; 
} 

.inputAnimation.active label { 
    top: -15px; 
} 

這是我的HTML：

<div data-role="page" id="signUpPage"> 
<div data-role="main" class="ui-content"> 
    <form> 

     <div class="inputAnimation"> 
      <label for="username">Name</label> 
      <input id="username" name="username" type="text" /> 
     </div> 
     <div class="inputAnimation"> 
      <label for="email">Email</label> 
      <input data-role="none" id="email" name="email" type="text" /> 
     </div> 
    </form> 
</div> 

，這是我的jQuery

$(document).ready(function() { 

    $('input').each(function() { 

     $(this).on('focus', function() { 
      $(this).parent('.inputAnimation').addClass('active'); 
     }); 

     $(this).on('blur', function() { 
      if ($(this).val().length == 0) { 
       $(this).parent('.inputAnimation').removeClass('active'); 
      } 
     }); 

     if ($(this).val() != '') $(this).parent('.inputAnimation').addClass('active'); 

    }); 
}); 

這裏是演示

Link to the jsfiddle

謝謝！

Answer 1

當jQM增強輸入時，它會添加一個DIV，使得.inputAnimation現在是輸入的祖父母而不是父母。最簡單的變化是使用的.parents()代替.parent()方法：

$('input').each(function() { 

    $(this).on('focus', function() { 
     $(this).parents('.inputAnimation').addClass('active'); 
    }); 

    $(this).on('blur', function() { 
     if ($(this).val().length == 0) { 
      $(this).parents('.inputAnimation').removeClass('active'); 
     } 
    }); 

    if ($(this).val() != '') $(this).parents('.inputAnimation').addClass('active'); 

}); 

更新FIDDLE