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

Question

自从昨晚以来，我一直在寻找解决问题的办法。 这是一个完全用JavaScript形式创建的模拟购物车。它必须通过2个参数TR恢复才能更进一步。

问题在于，当我验证表单时，他为我创建了正确数量的对象，但它也创建了与TR行相同数量的项目。

示例：我激活了3个项目，表单中已创建了3行。如果我验证购物车，然后我退回，这就是我得到的：

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

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

我试图让JSFIDDLE让你看得更清楚，但我没有设法显示发送结果。

代码：

$('.valide').click(function (e) {

    e.preventDefault();

    var columns = $('.trToCheck').map(function() {
        // $(this) is used more than once; cache it for performance.
        var $row = $(this);

        // For each row that's "mapped", return an object that
        //  describes the first and second <td> in the row.
        return {
            idenR: $row.data('id'),
            duree: $row.find($("select[name='chooseDuration']")).val()
        };
    }).get();

    $('#results').html(columns);


});

HTML：

<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>

编辑：这是删除一行的代码（它不是像jsfiddle那样编写的，但你理解）：

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

Answer 1

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

要检查是否可以尝试将$('.valide').click(...替换为$('.valide').unbind().click(...

像这样：

$('.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();
});