Программно имитировать щелчок по элементу при нажатии Enter в поле

Question

Мой HTML:

<div class="container">
  <div class="row d-none d-md-block d-xl-none" id="PrescriptionTitle">
      <div class="col-sm-6">
          <span for="" class="text-left">Brand Name</span>
      </div>
      <div class="col-sm-6">
          <span for="">Generic name</span>
      </div>
      <div class="col-sm-2">
          <span for="">Dose</span>
      </div>
      <div class="col-sm-2">
          <span for="">Units</span>
      </div>
      <div class="col-sm-3 col-sm-offset-5">
          <span class="text-nowrap" for="">Frequency</span>
      </div>
      <div class="col-sm-1">
          <span for="">Durn</span>
      </div>
      <div class="col-sm-2">
          <span for="inputEmail4">Units</span>
      </div>
  </div>


      <div class="row DrugRow" id="DrugRow1">
            <div class="col-sm-6">
              <input type="text" id="brand1" class="form-control BrandName input-sm ui-autocomplete-input" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
            </div>
            <div class="col-sm-6">
              <input type="text" id="generic1" class="form-control GenericName input-sm ui-autocomplete-input" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="dose1" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="doseunits1" class="form-control DoseUnits input-sm ui-autocomplete-input" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
            </div>
            <div class="col-sm-3">
              <input type="text" id="freq1" class="form-control Frequency input-sm ui-autocomplete-input" placeholder="OD" aria-label="Frequency" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="durn1" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
            </div>
            <div class="col-sm-2">
              <input type="text" id="durnunit1" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="">
            </div>
            <div class="col-sm-1">
              <a id="DelRow1" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
            </div>

      </div>
<div class="row DrugRow" id="DrugRow2">
<div class="col-sm-6">
  <input type="text" id="brand2" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
  <input type="text" id="generic2" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="dose2" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="doseunits2" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
  <input type="text" id="freq2" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="durn2" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
  <input type="text" id="durnunit2" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="" autocomplete="off">
</div>
<div class="col-sm-1">
  <a id="DelRow2" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>

<div class="row">
<div class="col-sm-23"></div>
<div class="col-sm-1">
  <a id="AddRow1" class="btn btn-primary btn-large AddRow" href="#" tabindex="5"><i class="fa fa-plus-circle fa-lg"></i></a>
</div>
</div>

</div>

Фрагмент кода Javascript:

var $input = $('input[type=text]');
$input.on('keyup', function (e) {
  var myClass = $(this).attr("class");
  console.log(myClass);
  if (myClass.indexOf("DurationUnits") != -1) {         
    $(this).siblings('.AddRow').click();
    return true;
  }
  // DurationUnits
  if (e.which === 13) {
    var ind = $input.index(this);
    $input.eq(ind + 1).focus()
  }
}); 
$('body').on('click', '.AddRow', function() {
// $("#DiscardModal").modal();
console.log("Clicked Add Row");
var id = 0;
var count = 0;
var IdList=[];
$(".DrugRow").each(function() {
  id = $(this).attr('id');
  count = id.replace("DrugRow", "");
});
var lastelementcount = count;
console.log("Last element count is " + lastelementcount);
count++;
var NewHTML = `
<div class="row DrugRow" id="DrugRow` + count + `">
    <div class="col-sm-6">
      <input type="text" id="brand` + count + `" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
    </div>
    <div class="col-sm-6">
      <input type="text" id="generic` + count + `" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="dose` + count + `" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="doseunits` + count + `" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
    </div>
    <div class="col-sm-3">
      <input type="text" id="freq` + count + `" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="durn` + count + `" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
    </div>
    <div class="col-sm-2">
      <input type="text" id="durnunit` + count + `" class="form-control DurationUnits input-sm" placeholder="days" aria-label="DurationUnits" aria-describedby="">
    </div>
    <div class="col-sm-1">
      <a id="DelRow` + count + `" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
    </div>
</div>
`;
$("#DrugRow" + lastelementcount).after(NewHTML);
event.preventDefault();
return false;
});

Мне нужно перейти к следующему полю ввода при нажатии Enter.Я успешно сделал это.Когда я подхожу к последнему полю ввода в строке (у которого есть класс DurationUnits), мне нужно смоделировать щелчок по соседней кнопке, которая имеет класс AddRow.Это элемент, и нажатие на него создаст несколько элементов по коду JavaScript (уже сделано).

Не работает код, имитирующий щелчок при нажатии клавиши ввода из ввода с классом DurationUnits

Answer 1

Это потому, что вы возвращаете true, если у него есть класс "DurationUnits".Возврат останавливает функцию от выполнения следующего условия (например, === 13)

  if (myClass.indexOf("DurationUnits") != -1) {         
    ....
    return true;
  }
  // On class "DurationUnits" this won't run:
  if (e.which === 13) {
    ....
  }