ASP.NET上的jQuery掩碼不起作用

Question

我想應用從http://digitalbush.com/projects/masked-input-plugin/獲得的掩碼，但是該掩碼不起作用。 這是我的代碼：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery.maskedinput.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(function ($) {
                $("#cnpjDate").mask("99/99/9999", { placeholder: "dd/mm/yyyy" });
                $("#date").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
                $("#phone").mask("(999) 999-9999");
                $("#tin").mask("99-9999999");
                $("#ssn").mask("999-99-9999");
            });

        </script>
</asp:Content>

我的輸入字段是這樣的

<input id="cnpjDate" type="text" /></td>

它在表內部，在視圖內部，在UpdatePanel內部的ContentTemplate內部的多視圖內部。

我在這里做錯了什么？

Answer 1

問題是masked-input-plugin正在使用jQuery中的.on函數，而jQuery 1.4.2中不提供該功能，您需要更新jQuery版本或降級masked-input-plugin。

還要確保在dom加載后運行jQuery函數：

$( document ).ready(function() {});

這是一個工作中的codepen

Answer 2

由於更新面板是通過ajax加載的，因此Jquery方法未綁定到DOM元素。 為了解決這個問題，將方法綁定到較高的dom元素上，並且不會通過ajax加載。

試試這個腳本：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">       
</asp:Content>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $('body').on('click','#cnpjDate',function(){
             $(this).mask("99/99/9999", { placeholder: "dd/mm/yyyy" });
        }); 
        $('body').on('click','#date',function(){
             $(this).mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
        }); 
        $('body').on('click','#phone',function(){
             $(this).mask("(999) 999-9999");
        }); 
        $('body').on('click','#tin',function(){
             $(this).mask("99-9999999");
        }); 
        $('body').on('click','#ssn',function(){
             $(this).mask("999-99-9999");
        }); 
    });
</script>