Как увеличить атрибут «для» в моей динамической форме c?

Question

Я новичок в программировании, поэтому я очень ценю, если кто-нибудь из вас сможет помочь мне с моим кодом. Мне удалось решить эту проблему до этого, перейдя по этой ссылке:

предыдущая строка не вычисляется / не обновляется из добавленных строк с использованием jquery

Но тогда у меня есть чтобы объединить этот код с этим:

function cloneMore(selector, prefix) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
         var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
         var id = 'id_' + name;
         $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    fullrowname = selector.substring(0,selector.length - 4) + 'not(:last)'
    var conditionRow = $(fullrowname);
    conditionRow.find('.btn.add-form-row')
    .removeClass('btn-success').addClass('btn-danger')
    .removeClass('add-form-row').addClass('remove-form-row')
    .html('<span class="fas fa-minus" aria-hidden="true"></span>');
    return false;
}

$("input.quantity,input.price").on('change', function() {
    Total($(this).attr("for"));
});  

Идентификатор постепенно увеличивается каждый раз, когда я нажимаю кнопку добавления, но атрибут for = "0" не увеличивается. Следовательно, мой расчет для ввода данных Dynami c не работает: (

Ребята, можете ли вы показать мне, как увеличить атрибут "for" в приведенном выше коде?

Answer 1

Подход, который вы используете, и предыдущий ответ, который вы получили, ошибочны. Инкрементные атрибуты id, которые генерируются во время выполнения в динамическом контенте c, являются антишаблоном, который, IMO, никогда не должен использоваться. Код быстро становится бесполезным, многословным, беспорядком.

Гораздо лучший подход - использовать общие классы для элементов, сгруппированных по поведению. Затем вы можете использовать один делегированный обработчик событий для всех этих элементов. Внутри этих обработчиков событий вы можете использовать методы обхода DOM, чтобы связать элементы друг с другом и взаимодействовать с ними.

Кроме того, вы не должны помещать такой большой код HTML в JS logi c. В идеале их не должно быть вообще. Чтобы исправить это, вы можете вместо этого clone() существующих элементов DOM и добавить их в новом месте, чтобы создать новые строки.

Наконец, обратите внимание, что при отправке AJAX запросов вы должны подключиться к событию submit form, а не к click кнопки отправки.

При всем этом сказал, попробуйте это:

jQuery($ => {
  let $table = $('#articles');

  $table.on('input', '.quantity, .price', function() {
    let $row = $(this).closest('tr');    
    let qty = $row.find('.quantity').val();
    var price = $row.find('.price').val();
    var total = (qty * price).toFixed(2);
    $row.find('.total').val(total);  
  })

  $table.on('click', '.btn-remove', function() {
    if ($table.find('tr').length > 1) // prevent deletion of all rows
      $(this).closest('tr').remove();
  })
 
  $table.on('click', '.btn-add', function() {
    let $clone = $table.find('tr:first').clone().appendTo($table);
    $clone.find('.quantity, .price').val('0');
    $clone.find('.total').val('');
  });

  $('#add_name').on('submit', function(e) {
    e.preventDefault();
    let $form = $(this);
    $.ajax({
      url: "wwwdb.php",
      method: "POST",
      data: $form.serialize(),
      success: function(data) {
        $form[0].reset();
      }
    });
  });
});

table tr:first-of-type td:last-of-type button {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <br />
  <br />
  <div class="form-group">
    <form name="add_name" id="add_name">
      <div class="table-responsive">
        <table class="table table-bordered" id="articles">
          <tr class="rrjeshta">
            <td><input value="0" type="number" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" /></td>
            <td><input value="0" type="number" name="price[]" placeholder="price" class="form-control name_list price" /></td>
            <td><input type="number" name="total[]" placeholder="total" class="form-control name_list total" readonly /></td>
            <td><button type="button" name="add" class="btn btn-success btn-add">Add new</button></td>
            <td><button type="button" name="remove" class="btn btn-danger btn-remove">X</button></td>
          </tr>
        </table>
        <input type="submit" class="btn btn-info" value="Submit" />
      </div>
    </form>
  </div>
</div>