Работа с динамически добавленными элементами в jQuery

Question

У меня большие проблемы с динамически добавленными элементами. Я не могу получить атрибут класса или данных из добавленных элементов, даже используя селектор «.on()», как предлагается на этом другом question. У меня есть этот вид:

<div class="row"> 

     <div class="col-md-12"> 
      <form action="" class="form-horizontal" id="newVehicle" method="post" accept-charset="utf-8"> 

    <!-- First form-group --> 

       <div class="form-group specs" data-class="specs"> 
        <label for="" class="col-sm-2 control-label">Especificações</label> 
        <div class="col-sm-4"> 
         <select class="form-control" name="specs[]"> 
          <option></option> 
          <option data-target="new-equip">Novo equipamento</option> 
         </select> 
        </div> 
        <div class="col-sm-2"> 
         <div class="btn-group" role="group" aria-label=""> 
          <a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a> 
          <a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a> 
         </div> 
        </div> 
       </div> 

<!-- Second form group --> 

       <div class="form-group equips" data-class="equips"> 
        <label for="" class="col-sm-2 control-label">Equipamento</label> 
        <div class="col-sm-4"> 
         <select class="form-control" name="equips[]"> 
          <option></option> 
          <option data-target="new-equip">Novo equipamento</option> 
         </select> 
        </div> 
        <div class="col-sm-2"> 
         <div class="btn-group" role="group" aria-label=""> 
          <a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a> 
          <a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a> 
         </div> 
        </div> 
       </div> 

      </form> 
     </div> 

    </div> 

Я пытаюсь добавить новую форму-группу при нажатии «.btnNew» дает имя атрибута, как элементы ранее. Он работает только с первым элементом, но по добавленным элементам он не будет работать.

Мой JavaScript:

$('#newVehicle').on('click', '.btnMinus, .btnNew, .btnPlus',function(event) { 
    event.preventDefault(); 
    /* Act on the event */ 
    var formGroupClass = $(this).closest('.form-group').attr('data-class'); 
    console.log($(this).closest('.form-group').attr('class')); 
    if($(this).hasClass('btnMinus')) { 
     if($(this).closest('.form-group').is('.' + formGroupClass + ':first-child')) { 
      return false; 
     } else { 
      $(this).closest('.form-group').remove(); 
     } 
    } 
    if($(this).hasClass('btnPlus')) { 
     $(this) 
     .closest('.form-group') 
     .after('<div class="form-group ' + formGroupClass + '" data-clas="' + formGroupClass + '"></div>') 
     .next() 
     .append('<label for="" class="col-sm-2 control-label"></label>') 
     .append('<div class="col-sm-4"></div>') 
     .append('<div class="col-sm-2"></div>') 
     .children('div.col-sm-4') 
     .append('<select class="form-control" name="' + formGroupClass + '[]"></select>') 
     .children('select') 
     .append('<option></option>') 
     .closest('.form-group') 
     .children('div.col-sm-2') 
     .append('<div class="btn-group" role="group" aria-label=""></div>') 
     .children('.btn-group') 
     .append('<a href="" class="btn btn-default btnMinus"><span class="glyphicon glyphicon-minus"></span></a>') 
     .append('<a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>') 
     .append('<a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a>'); 
    } 
    if($(this).hasClass('btnNew')) { 
     $(this) 
     .closest('.form-group') 
     .after('<div class="form-group ' + formGroupClass + '" data-clas="' + formGroupClass + '"></div>') 
     .next() 
     .append('<label for="" class="col-sm-2 control-label"></label>') 
     .append('<div class="col-sm-4"></div>') 
     .append('<div class="col-sm-2"></div>') 
     .children('div.col-sm-4') 
     .append('<input type="text" name="' + formGroupClass + '[]" class="form-control" placeholder="Adicionar novo equipamento">') 
     .closest('.form-group') 
     .children('div.col-sm-2') 
     .append('<div class="btn-group" role="group" aria-label=""></div>') 
     .children('.btn-group') 
     .append('<a href="" class="btn btn-default btnMinus"><span class="glyphicon glyphicon-minus"></span></a>') 
     .append('<a href="" class="btn btn-default btnNew"><span class="glyphicon glyphicon-pencil"></span></a>') 
     .append('<a href="" class="btn btn-default btnPlus"><span class="glyphicon glyphicon-plus"></span></a>'); 

    } 
}); 

Вы можете видеть, что работает в этом jsfiddle

Заранее спасибо

Answer 1

Это простая опечатка вы ищете data-class и настройка data-clas атрибут новых элементов, изменение он и будет работать нормально.

Код:

.after('<div class="form-group ' + formGroupClass + '" data-class="' + formGroupClass + '"></div>') 

Демо: https://jsfiddle.net/cse87189/