Как сделать следующую проблему ввода маски?

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');
});

Это замаскирует вводимые данные даже после первого запуска кода.

Answer 3

Первый Не используйте ID на входе

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

Во-вторых, если вы используете jQuery, используйте его. Это намного легче читать.

<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

Плагин маски не привязывается в реальном времени к новым элементам в DOM, а привязывается к существующему тогда элементу из вашего селектора $ ('# j').

1. Использованиекласс вместо идентификатора (поскольку вы не можете на законных основаниях иметь два элемента с одинаковым идентификатором на странице), и
2. При необходимости повторно вызвать .mask() для ваших динамически создаваемых элементов после добавления в DOM.