jquery - 在最近添加的 jquery 函数中调用 jquery 函数

Question

这个标题有点混乱，但这是我的问题：

我在 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');

所以，当有人点击添加一个新字段时，这个字段必须有一个掩码，但它没有。

Answer 1

您正在尝试将事件处理程序绑定到 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');
    });
});

由于每次单击都添加一个元素，因此使用 :last 过滤器或 last 函数是有意义的：

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

或者

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