验证输入，更新​​属性以匹配验证状态

Question

我有一个表，如下所示：

<div id="email-form" title="New email campaign"> 
    <form id="email-form"> 
    <label for="dialog-name"><b>Your Name</b></label> 
    <input type="text" id="dialog-name"> 
    <label for="dialog-email"><b>Your Email</b></label> 
    <input type="text" id="dialog-email"><br> 

    <label for="dialog-recipients"><b>Recipients</b></label> 
    <table id="dialog-recipients"> 
     <tr> 
     <th style="font-weight:normal;text-align:left;">Name</th> 
     <th style="font-weight:normal;text-align:left;">Email</th> 
     </tr> 
     <tr> 
     <td class="control-group"><input type="text" class="dialog-recipient-name control-label"></td> 
     <td class="control-group"><input type="text" class="dialog-recipient-email control-label"></td> 
     <td class="remove-recipient"><i class="icon-remove"></i></td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
     <a href="javascript:void(0)" id="add-recipient-row" style="color:#0088cc"><small><i class="icon-plus"></i> Add one (TAB)</small></a> 
     </tr> 
    </table> 
    </form> 
</div> 

当你选择最后<input>并按标签，另外一个附加像这样：

 function appendRow() { 
     $("#dialog-recipients").append(' <tr> <td><input type="text" class="dialog-recipient-name"></td> <td><input type="text" class="dialog-recipient-email"></td> <td class="remove-recipient"><i class="icon-remove"></i></td> </tr>'); 
     } 

     $('#dialog-recipients').on('keydown', 'input', function (e) { 
      // Append onto last row with TAB 
      if (e.keyCode !== 9) return; 
      var lastTr = $('#dialog-recipients tr:last'); 
      var lastTd = $('#dialog-recipients tr:last td').eq(-2); 
      if (($(e.target).closest('td')).is(lastTd)) { 
       appendRow(); 
      } 
     }); 

，我想对类.error添加到任何/所有输入的标签是空白的，像这一个.dialog收件人名称，例如：

 $('#dialog-recipients').on('blur', '.dialog-recipient-name', function(e) { 
     if ($(this).val() === '') { 
      $(this).closest('td').addClass('error'); 
     } else { 
      $(this).closest('td').removeClass('error'); 
     } 
     }); 

但是，此代码仅适用于第一个input.dialog-recipient-name实例，验证似乎不适用于任何后续输入。

Answer 1

想通了：

最后一个片段工作得很好，但appendRow（）应修订包括在<td>。对照组。

 function appendRow() { 
     $("#dialog-recipients").append(' <tr> <td class="control-group"><input type="text" class="dialog-recipient-name"></td> <td>&nbsp;&nbsp;<input type="text" class="dialog-recipient-email"></td> <td class="remove-recipient" style="padding-left: 8px;padding-bottom: .5em;font-size:1.5em;"><i class="icon-remove"></i></td> </tr>'); 
     }