Javascript 使用jquery在动态字段中更改事件

我创建了一个表单，用户可以动态添加字段数。 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>

$（）.ready（函数（））{
cloneform=$（'#div forms'）.html（）；
$（文档）.on（'click'，'addDiv'，函数（e）{
$（“#div forms”）.append（cloneform）；
});
$（文档）.on（'click'，'.remDiv'，函数（e）{
$（event.target）.parent（）.parent（）.parent（）.remove（）；
});
});

每次用户创建新行时，我都试图在select change中触发隐藏或显示日期字段的事件。 但我不会让它只出现在修改后的选择日期字段中。

---

我如何才能让jquery知道它应该在哪一行更改所选字段的样式呢？

您可以添加一个事件处理程序来监视您的任何.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();
        }
    });
});

---

$（文档）。在（'click'，'.remDiv'，函数（e）{

，

$（event.target）

e

！=

事件

。看起来像是一个输入错误问题。感谢您的回答。这是应该隐藏或仅显示在发生更改的选择行上的div。我对我的答案进行了编辑，我不确定是什么条件决定是否显示日期字段。我希望如此帮助。我这样做了：$（函数（）{$（document）.on（'change'，'.cbOperacao'，函数（）{var ParentDiv=$（this.close（'div.col'）；var vlr=this.value；if（vlr==2）{ParentDiv.find（'.dataSoN'）.show（）；}）；但事实并非如此working@IgorLuciano

.dataSoN

不是

.cbOperacao

的ParentDiv的子级。它是ParentDiv的同级。请使用

最近（'.form row'）

，不要这样做

parent（）.parent（）

stuff，：）