如何做以下面具输入问题？

Question

我有一个掩盖文本框的脚本,就在这里

<script src="http://jquery-joshbush.googlecode.com/
files/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {

      $('#j').mask('99:99');
         });
</script>

我也有一个脚本动态添加文本框,而我点击一个按钮

<script type="text/javascript">
    function addRow(tableID) {

                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);

                var colCount = table.rows[0].cells.length;

                for(var i=0; i<colCount; i++) {

                    var newcell = row.insertCell(i);

                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    //alert(newcell.childNodes);
                    switch(newcell.childNodes[0].type) {
                        case "text":
                                newcell.childNodes[0].value = "";
                                newcell.childNodes[0].id="j";
                                alert(newcell.childNodes[0].id);
                                break;
                        case "checkbox":
                                newcell.childNodes[0].checked = false;
                                break;
                        case "select-one":
                                newcell.childNodes[0].selectedIndex = 0;
                                break;
                    }
                }
            }

            function deleteRow(tableID) {
                try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;

                for(var i=0; i<rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if(null != chkbox &amp;&amp; true == chkbox.checked) {
                        if(rowCount <= 1) {
                            alert("Cannot delete all the rows.");
                            break;
                        }
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }


                }
                }catch(e) {
                    alert(e);
                }
            }
    </script>

我的输入框是

<INPUT type="text" name="STime[]" id="j"/>

<INPUT type="text" name="ETime[]" id="j"/>

我现在面临的问题是,第一个文本框将有一个蒙版结构,但在我用j脚本的帮助动态添加一个文本框后,我不会将文本框视为蒙版？为什么？我做错了什么？

Answer 1

使用类创建绑定到输入的事件(如果不必要,请不要使用ID).使用jQuery .on方法http://api.jquery.com/on/

例:

<input class="classSelector" />

<script>  
  $(document).on("focus", "classSelector", function() { 
    $(this).mask("99:99");
  });
</script>

您可以动态创建所需数量的输入,并使用on事件绑定来屏蔽它们.您创建的该类的每个新输入都将附加到该事件处理程序.

Answer 2

使用livequery 插件。然后给出您想要屏蔽该类的所有元素maskme。现在你可以这样做：

$(".maskme").livequery(function(){
    $(this).mask('99:99');
});

即使在代码首次运行后，这也会屏蔽添加的输入。