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.

Answer 2

Use the livequery plug-in. Then give all elements you want to mask the class maskme. Now you can do:

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

This will mask inputs added even after the code is first run.

Answer 3

First Dont use ID on the input

<input type="text" name="STime[]" class="jClass"/>

Second if your using jQuery then use it. This is much easier to read.

<script type="text/javascript">
    function addRow(tableID) {
      var table = $("#" + tableID); //get the table
      var firstRowClone = $("tr:first", table).clone(); //clone the first row
      $("input:checkbox",firstRowClone).attr("checked", false);  // set all checkboxes to unchecked
      $("select", firstRowClone).each(function () { //Set all select lists to select first item
        this.selectedIndex = 0;
      }
      table.append(firstRowClone); //append the cloned row to the table.
      $("input:text", firstRowClone).val("").mask("99:99"); //set all input type="text" with value of "" and sets the mask on the clone.

    });

    function deleteRow(tableID) {
      $("#" + tableId + " tr:not(:eq(0))").remove(); //Remove all rows except the first row.         
    }


    $(document).ready(function {
      $('.jClass').mask('99:99'); //sets the mask on any rows loaded initially
    });

</script>

Answer 4

The mask plug-in is not binding live to new elements in the DOM, but rather is binding on the then-existing element from your $('#j') selector.

1. Use a class instead of an ID (since you cannot legally have two elements with the same id on the page), and
2. If necessary, re-call .mask() on your dynamically-created elements after adding to the DOM.

Answer 5

Dont use Id use class in script for multipal use time mask in php ghj