Come eseguire il seguente problema di immissione maschera?

Question

Sto avendo uno script per mascherare una casella di testo, qui si è

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

Inoltre sto avendo uno script per aggiungere dinamicamente casella di testo mentre si fa clic su un pulsante di

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

e la mia casella di inserimento sono

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

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

il problema che sto affrontando ora è, la prima casella di testo avrà una mascherata struttura, ma dopo che aggiungo una casella di testo in modo dinamico con l'aiuto di j script, non otterrò la casella di testo come mascherata? cosa ho sbagliato?

Answer 1

Utilizzare livequery plug-in. Quindi assegnare tutti gli elementi per mascherare la classe maskme. Ora si può fare:

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

Ciò mascherare ingressi aggiunto anche dopo che il codice è prima esecuzione.

Answer 2

Il plug-in maschera non è vincolante dal vivo ai nuovi elementi nel DOM, ma piuttosto è vincolante sull'elemento allora esistente dal proprio selettore $ ('# j').

1. Utilizzare una classe invece di un ID (perché non si può essere giuridicamente due elementi con lo stesso ID della pagina), e
2. Se necessario, ri-chiamare .mask() sui vostri elementi dinamicamente creati dopo l'aggiunta di il DOM.

Answer 3

Prima non uso ID sull'ingresso

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

In secondo luogo, se la vostra utilizzando jQuery quindi utilizzarlo. Questo è molto più facile da leggere.

<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

creare un evento di legame ad un ingresso con la classe (non utilizzare ID, se non si dispone a) ci si rivolge. Utilizzare il metodo di jQuery .on http://api.jquery.com/on/

Esempio:

<input class="classSelector" /> 

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

È possibile creare in modo dinamico come molti di questi ingressi che si desidera e mascherare loro utilizzando il sull'evento vincolante. Ogni nuovo input con quella classe che creerai ti assegnerà questo gestore di eventi.