Javascript 使用jQuery发送表单时获取正确数量的对象

从昨晚开始，我一直在寻找解决我问题的方法，但没有达成任何协议。 这是一个完全用JavaScript创建的表单，模拟购物车。它必须通过两个参数恢复才能继续

问题是，当我验证表单时，他为我创建了正确数量的对象，但它也为我创建了与那里

TR

行相同数量的项目

示例：我激活了3项，表单中创建了3行。如果我验证购物车并重新登录，我会得到以下结果：

我得到3行，每行包含相同的对象

然后，如果我删除三篇文章中的一篇，它会删除三个对象中的一个，但是它仍然会向我发送包含其余两个对象的三行

我试着让你更好地理解我的意思，但我没有显示发送的结果

代码：

---

您的小提琴工作正常，看起来您在应用程序中多次分配了单击事件处理程序

若要检查其是否正确，您可以尝试替换

$（'.valide'）。单击（…

为

$（'.valide'）。解除绑定（）。单击（…

像这样：

$('.valide').unbind().click(function (e) {
  e.preventDefault();

  var columns = $('.trToCheck').map(function() {
    var $row = $(this);
    return {
        idenR: $row.data('id'),
        duree: $row.find($("select[name='chooseDuration']")).val()
    };
  }).get();
});

---

您可以显示用于删除行的代码吗？在您的fiddle

列中

只在我的控制台中记录一个包含两个项目的数组。fiddle工作正常，看起来您在应用程序中多次分配了click事件处理程序。若要检查它是否正确，您可以尝试替换

$（'.valide'）。单击（…

，使用

$（'.valide'）。解除绑定（）。单击（…

<form class="table-responsive container">
        <table class="table table-th-block table-dark">
            <thead>
                <tr>
                    <th>name</th>
                    <th class="text-center" style="width: 150px;">duration</th>
                    <th class="text-center" style="width: 100px;"></th>
                    <th class="text-right" style="width: 150px;">total</th>
                </tr>
            </thead>

            <tbody style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(221, 221, 221);">
            <tr class="trToCheck" data-id="1">
                <td>name 1</td>
                <td class="text-center">
                  <select class="form-control" name="chooseDuration">
                    <option class="selected" value="1">1 month</option>
                    <option value="2">2 months</option>
                    <option value="3">3 months</option>
                    <option value="6">6 months</option>
                    <option value="9">9 months</option>
                    <option value="12">1 year</option>
                  </select>
                </td>

                <td class="text-right">
                  <a class="fa fa-trash" href="#" style="color: rgb(67, 74, 84);"></a>
                </td>

                <td class="text-right"><span>19<i class="fa fa-eur" style="padding-left: 5px;"></i></span></td>
              </tr>

                <tr class="trToCheck" data-id="2">
                <td>name 2</td>
                <td class="text-center">
                  <select class="form-control" name="chooseDuration">
                    <option class="selected" value="1">1 month</option>
                    <option value="2">2 months</option>
                    <option value="3">3 months</option>
                    <option value="6">6 months</option>
                    <option value="9">9 months</option>
                    <option value="12">1 year</option>
                  </select>
                </td>

                <td class="text-right">
                  <a class="fa fa-trash" href="#" style="color: rgb(67, 74, 84);"></a>
                </td>

                <td class="text-right"><span>19<i class="fa fa-eur" style="padding-left: 5px;"></i></span></td>
              </tr>
            </tbody>
         </table>

         <p class="text-right">
           <button class="btn btn-success valide" style="margin-left: 20px;">
               <i class="fa fa-check"></i><span>Next step</span></button>
         </p>
    </form>

<div id="results">Results<br></div>

$('.supprLine').click(function (e) {
  e.preventDefault();
  $(this).parents('tr').remove();
});

$('.valide').unbind().click(function (e) {
  e.preventDefault();

  var columns = $('.trToCheck').map(function() {
    var $row = $(this);
    return {
        idenR: $row.data('id'),
        duree: $row.find($("select[name='chooseDuration']")).val()
    };
  }).get();
});