如何使用具有数组的jquery处理新字段

Question

例如，我有 3 个字段，用户可以输入数字 a、b、c

所以字段 C 将检查字段 C 中输入的数字是否为 b。

在表单中，我有一个按钮，用于创建附加行 另一个a，b，c；所以我不知道如何像以前一样控制相同的操作......

FIDDLE

$(".c").change(function() {

  if ($('.c').val() > $('.a').val() || $('.c').val() < $('.b').val()) {
    $('.c').css("backgroundColor", "#ff0000");
  } else {
    $('.c').css("backgroundColor", "#00FF00");
  }
});


$('.add').click(function() {

  var tr = '<tr>' + '<td>Cota1</td>' +
    '<td><input type="text" name="tol_cota1[]" class="form-control a"></td>' +
    '<td><input type="text" name="tolb_cota1[]" class="form-control b"></td>' +
    '<td><input type="text" name="medido_cota1[]" class="form-control c"></td>' +
    '<td><input type="button"  class="btn btn-danger remove" value="Remove Line"></td>' + '</tr>';

  $('.details').append(tr);


});

// delete row 
$('.details').delegate('.remove', 'click', function() {
  var con = confirm("Are you sure you want to remove the line?");
  if (con) {
    $(this).parent().parent().remove();
  }
});

Answer 1

change event 不会冒泡，这意味着表单中的每个输入都需要一个事件侦听器。

jQuery 在使用 .on() method 和选择器（它的第二个参数）时会自动处理这个问题，这相当于旧的不推荐使用的 .delegate() method。根据官方文档中的描述，它将：

根据一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

所以，如果你这样做：

$('.details').on('change', 'input', (event) => { ... });

这将在与.details 选择器匹配的所有元素内的任何<input> 元素上侦听change 事件，无论它们在调用方法时是否已经存在，或者它们是在您的情况下随后创建的。

现在，一旦发生change 事件，您应该使用.parent()、.eq 和.find() 方法选择触发事件的<input> 所在的行，从那里你得到所有 3 个输入都基于它们的位置或选择器、它们的值，并执行您的逻辑来更新该特定行。

无论如何，如果您使用input 而不是侦听change 事件，它确实会冒泡，您可以从event delegation 中受益。这意味着在这种情况下将为整个<tbody> 创建一个事件侦听器，而不是每个<input> 一个。使用event.target，您将能够区分哪个触发了事件，无论如何您都需要使用它来获取同一行中的其他输入。

全部加在一起，它看起来像这样：

// Better to keep the reference instead of getting it each time:

const details = $('#details'); 

details.on('input', 'input', (event) => {
    const children = $(event.target).parents().eq(1).children();
    const avgInput = children.eq(3).find('input');
    const max = parseInt(children.eq(1).find('input').val());
    const min = parseInt(children.eq(2).find('input').val());
    const avg = parseInt(avgInput.val());
    
    if (isNaN(max) ||isNaN(min)|| isNaN(avg)) {
      // Don't do anything if any of them is blank.
      
      return;
    }

    avgInput.css('backgroundColor', avg > max || avg < min ? '#ff0000' : '#00FF00');		
});

details.on('click', '.remove', (event) => {   
  if (confirm('Are you sure you want to remove the line?')) {
    $(event.target).parents().eq(1).remove();
  }
});

$('#add').click(() => {					  
  details.append(`
    <tr>
     <td>Cota1</td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><button class="remove">DELETE</button></td>
    </tr>
  `);
});

body {
  font-family: sans-serif;
  font-size: .75rem;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  position: relative;
}

table th, 
table td {
  width: 20%;
  padding: 0;
  border-bottom: 1px solid #EEE;
  height: 1.75rem;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem;
  border: none;
  outline: none;
  text-align: center;
}

input:hover {
  background: #FAFAFA;
}

input:focus {
  background: #FFA;
}

.remove {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem;
  border: none;
  outline: none;
  background: #FFF;
  cursor: pointer;
}

.remove:hover {
  background: #F44;
}

#add {
  width: 100%;
  border: none;
  background: #FFF;
  padding: .5rem;
  border-radius: 2px;
  color: #000;
  text-transform: uppercase;
  font-size: .75rem;
  margin: 1rem 0 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .25);
  transition: box-shadow ease-in .125s;
}

#add:hover {
  box-shadow: 0 0 .5rem rgba(0, 0, 0, .25);
}

<table>
  <thead>
    <tr>
      <th> </th>
      <th>TOL +</th>
      <th>TOL -</th>
      <th>AVG</th>
      <th></th>
    </tr>	
  </thead>
  
  <tbody id="details">
    <tr>
     <td>Cota1</td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td> </td>
    </tr>
  </tbody>
</table>

<button id="add">ADD</button>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

最好的方法是使用最接近的函数

$(".c").change(function(){

        if($(this).val() > $(this).closest('.a').val() || $(this).closest('.c').val() < $('.b').val()) 
                {
         $(this).closest('.c').css( "backgroundColor", "#ff0000" );    
                }else{
                $(this).closest('.c').css( "backgroundColor", "#00FF00" );        
                }           
        });