javascript - 使用 jquery 动态字段中的事件更改

Question

我创建了一个表单，用户可以动态添加字段数量。HTML:

<div id="div-forms">
        <div class="form-row mb-1">
          <div class="col">
            <input type="text" name="txtRegional[]" class="form-control" placeholder="Regional" required>
          </div>
          <div class="col">
            <input type="text" name="txtFilial[]" class="form-control" placeholder="Filial" required>
          </div>                          
          <div class="col">
            <input type="text" name="txtAgencia[]" class="form-control agencia" placeholder="Agência" required>
          </div>
          <div class="col">
            <input type="text" name="txtContrato[]" class="form-control contrato" placeholder="Contrato" maxlength="12" required>
          </div>
          <div class="col dataSoN" id="cData" style="display:none;">
            <input type="text" name="txtData[]" class="form-control date" placeholder="Data" value="<?php echo date("d-m-Y");?>">
          </div>
          <div class="col">
            <input type="text" name="txtSaldoDevido[]" class="form-control money txtSaldoDevido" placeholder="Saldo Dev" required>
          </div>              
          <div class="col">
            <input type="text" name="txtValorParcela[]" class="form-control money txtValorParcela" placeholder="V.Parcela" required>
          </div>
          <div class="col">
            <input type="text" name="txtAgenciaTitular[]" class="form-control agencia" placeholder="Ag.Titular" required>
          </div>
          <div class="col" style="display:none;">
            <input type="text" name="txtValorLiquidacaoAntecipada[]" class="form-control money" placeholder="V.Liquid.Ant." readonly>
          </div>
          <div class="col">
            <input type="text" name="txtContratoNovo[]" class="form-control contratoNovo" placeholder="Novo Contrat" required>
          </div>
          <div class="col">
            <select class="custom-select mr-sm-2 cbOperacao" name="cbOperacao[]" id="cbOperacao" required>
              <option selected="selected" disabled="disabled">Selecione</option>
              <?php 
              $query = sprintf("select idoperacao, operacao, ativo from operacoes where ativo = 1");
              $result = mysqli_query($con, $query);
              while($linha = mysqli_fetch_assoc($result)) {
              ?>
                <option value="<?php echo $linha['idoperacao']; ?>"><?php echo $linha['operacao']; ?></option>
              <?php
              }
              ?>
            </select>
          </div>                         
          <div class="col">
            <a href="#" class="addDiv"><i class="fas fa-plus mt-3"></i></a>
            <a href="#" class="remDiv"><i class="fas fa-minus mt-3"></i></a>
          </div>                                              
        </div>
      </div>
      <div class="row">
        <div class="col mt-2">
          <button type="submit" class="btn btn-primary mb-2">Gravar</button>
        </div>
      </div>         
    </form>

Jquery:

<script type="text/javascript">
  $().ready(function() {
      cloneform = $('#div-forms').html();        
      $(document).on('click','.addDiv', function(e){
        $('#div-forms').append(cloneform);
      });
      $(document).on('click','.remDiv', function(e){
        $(event.target).parent().parent().parent().remove();
      });
  });
</script>

每次用户创建新行时，我都会尝试在隐藏或显示日期字段的选择更改中触发事件。但我并没有把它仅仅放在修改后的选择日期字段中。我该如何做才能让 jquery 知道哪一行应该更改所选字段的样式？

Answer 1

您可以添加事件处理程序来监视任何 .cbOperacao 选择的更改。不过，我没有看到您的日期字段，因此不知道如何在选择更改事件之外提供帮助。

$(function () {
    $(document).on('change', '.cbOperacao', function () {
        var ParentDiv = $(this).closest('div.col');
        if (someCondition) {
            ParentDiv.find('.form-control.date').hide();
            //or
            ParentDiv.find('.form-control.date').show();
            //or
            ParentDiv.find('.form-control.date').toggle();
        }
    });
});