2

このタイトルは少し混乱していますが、ここに私の問題があります:

私は jquery にこの追加機能を持っています:

$(document).ready(function(){   

   var i = $('input').size() +1;

   $('#add').click(function(event) {
        event.preventDefault();

    $('.table1').before('<table class="new_table">
       '<tr>' +
         '<td colspan="4" class="subTitle_bar">' +
           '<spring:message code="phoneTable" /> '+ i +' '+ 
         '</td>' +
       '</tr>' +

       '<tr>' +
           '<td class="item">' +
              '<spring:message code="phoneNumber"  />' +
              '<span class="required">*</span>' +
           '</td>' +

           '<td colspan="3">' +
              '<input type="text" id="phone1' + i + '" name="phone1' + i + '" class="requiredField phone" />' +
           '</td>' +
       '</tr>');
     i++;
    });

そして、この class="requiredField phone" は、この電話マスクを呼び出します:

$(document).ready(function($) {
$.mask.definitions['~']='[+-]';
$('.phone').mask('(99) 9999-9999');

したがって、誰かがクリックして新しいフィールドを追加するとき、このフィールドにはマスクが必要ですが、マスクはありません。

4

1 に答える 1

0

Document ready イベントの $('.phone') 要素にイベント ハンドラーをバインドしようとしていますが、その時点では DOM ツリーに存在していません。

解決策は非常に簡単です。次のようなことを行う必要があります(テストされていないコード):

$(document).ready(function(){   

   var i = $('input').size() +1;

   $('#add').click(function(event) {
        event.preventDefault();

    $('.table1').before('<table class="new_table"><tr>' +
         '<td colspan="4" class="subTitle_bar">' +
           '<spring:message code="phoneTable" /> '+ i +' '+ 
         '</td>' +
       '</tr>' +

       '<tr>' +
           '<td class="item">' +
              '<spring:message code="phoneNumber"  />' +
              '<span class="required">*</span>' +
           '</td>' +

           '<td colspan="3">' +
              '<input type="text" id="phone1' + i + '" name="phone1' + i + '" class="requiredField phone" />' +
           '</td>' +
       '</tr>');
     i++;
     $.mask.definitions['~']='[+-]';
     $('.phone').mask('(99) 9999-9999');
    });
});

クリックごとに 1 つの要素を追加するため、:last フィルターまたは last 関数を使用するのが理にかなっています。

 $('.phone').filter(':last').mask('(99) 9999-9999');

または

 $('.phone').last().mask('(99) 9999-9999');
于 2013-05-29T12:37:09.513 に答える