How to do following mask input problem?

Question

i am having a script to mask a textbox,here it it

<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>

i am also having a script to dynamically add text box while i click a button

<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>

and my input box are

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

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

the problem i am facing now is, the first text box will have a masked structure,but after i add a text box dynamically with help of j script, i will not get the text box as masked?why?? what i did wrong?

Answer 1

Create an event binding to an input with the class (don't use ID if you don't have to) you are targeting. Use the jQuery .on method http://api.jquery.com/on/

Example:

<input class="classSelector" />

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

You can dynamically create as many of those inputs you want and mask them using the on event binding. Every new input with that class you create will get that event handler attached to it.