退出并重新进入时出于某种原因在表中复制动态行？

Question

让我解释一下这应该做什么，应该做什么以及它应该做什么。

这基本上是每次单击“添加行请按钮”时向表中添加一个表行。

它只是意味着追加1行，它确实很好，直到你点击完成按钮，这使得灯箱效果消失。

但是，如果他们再次回到那里，由于某种原因重复了效果。

如果再次退出然后重新输入，则现在将行重复三倍。

任何人都可以指出我为什么会这样做的正确方向？

Here's a jsfiddle so you can see what I mean

以下是html代码：

<a href="#" id="quottable">Click here</a>
<div class="model-background">

  <div class="model-wrap">

    <div class="ubl-section-5">

      <div class="table-responsive" id="jquerytable">

        <table class="table table-bordered">
          <thead>
            <tr>
              <th class="text-center">Item Description</th>
              <th class="text-center">Cost</th>
              <th class="text-center">Sell At</th>
              <th class="text-center">Quantity</th>
              <th class="text-center">Total Cost</th>
              <th class="text-center">Total Sell</th>
              <th class="text-center">Margin</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="text" class="form-control" id="jquerytabledescription" value="" placeholder="Unit Item Name">
              </td>
              <td class="text-center">
                <input type="text" class="form-control" id="jquerytablecosts" value="" placeholder="Enter Cost Without &pound; Symbol">
              </td>
              <td class="text-center">
                <input type="text" class="form-control" id="jquerytablesell" value="" placeholder="Enter Selling Price Without &pound; Symbol">
              </td>
              <td class="text-center">
                <input type="text" class="form-control" id="jquerytablequantity" value="" placeholder="Quantity">
              </td>
              <td class="text-center" id="jqueryTotalcost">X</td>
              <td class="text-center" id="jquerySellingcost">X</td>
              <td class="text-center" id="jquerymargin">X</td>
            </tr>
          </tbody>
        </table>

        <p><a href="#" class="btn btn-default btn-block" id="anotherrowplease">Need Another Row Please</a></p>

        <p><a href="#" class="btn btn-danger btn-block" id="ubldone4">Done</a></p>

      </div>

    </div>

  </div>

</div>

我使用Bootstrap作为初始css，这里有一点定制：

.model-background {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: none;
}

.model-wrap {
  width: 80%;
  height: auto;
  margin: 100px auto 0px auto;
  padding: 40px;
  float: none;
  background-color: white;
}

.ubl-section-5 {
  display: none;
}

然后我最终运行jQuery 3.1以及此代码：

jQuery(document).ready(function($) {

  "use strict";

  $('#quottable').on('click', function() {

    var idName = '';
    var lastChar = '';

    var jc = '';
    var js = '';
    var jq = '';

    var jfc = '';
    var jfs = '';
    var jmgn = '';

    $('.ubl-section-5').show();
    $('.model-background').fadeIn(500);

    $.cookie('howMany', 1);

    $('#anotherrowplease').on('click', function(event) {

      event.preventDefault();

      var newRow = '';

      var checkHowmany = parseInt($.cookie('howMany'));
      if (checkHowmany === 1) {
        checkHowmany = 2;
      }

      $.cookie('howMany', checkHowmany + 1);

      newRow += '<tr>';
      newRow += '<td><input type="text" class="form-control" id="jquerytabledescription' + checkHowmany + '" value="" placeholder="Unit Item Name"></td>';
      newRow += '<td class="text-center"><input type="text" class="form-control" id="jquerytablecosts' + checkHowmany + '" value="" placeholder="Enter Cost Without &pound; Symbol"></td>';
      newRow += '<td class="text-center"><input type="text" class="form-control" id="jquerytablesell' + checkHowmany + '" value="" placeholder="Enter Selling Price Without &pound; Symbol"></td>';
      newRow += '<td class="text-center"><input type="text" class="form-control" id="jquerytablequantity' + checkHowmany + '" value="" placeholder="Quantity"></td>';
      newRow += '<td class="text-center" id="jqueryTotalcost' + checkHowmany + '">X</td>';
      newRow += '<td class="text-center" id="jquerySellingcost' + checkHowmany + '">X</td>';
      newRow += '<td class="text-center" id="jquerymargin' + checkHowmany + '">X</td>';
      newRow += '</tr>';

      $('#jquerytable tbody').append(newRow);

      //calculate each and every item
      $('#jquerytable input').change(function() {

        //find the parent id so we know
        idName = $(this).attr('id');
        lastChar = idName.substr(idName.length - 1);

        jc = $('#jquerytablecosts' + lastChar).val();
        js = $('#jquerytablesell' + lastChar).val();
        jq = $('#jquerytablequantity' + lastChar).val();

        if (jc == '' || jc == 'undefined' || jc == null) {
          jc = 0;
        }
        if (js == '' || js == 'undefined' || js == null) {
          js = 0;
        }
        if (jq == '' || jq == 'undefined' || jq == null) {
          jq = 0;
        }

        jfc = jc * jq;
        jfs = js * jq;
        jmgn = 100 - ((jfc / jfs) * 100);

        if ($.isNumeric(lastChar) !== false) {

          //get the values of the 3 items and then add them to the final results
          $('#jqueryTotalcost' + lastChar).html('&pound;' + jfc);
          $('#jquerySellingcost' + lastChar).html('&pound;' + jfs);
          $('#jquerymargin' + lastChar).html(jmgn.toFixed(2) + '%');

        }

      });

    });

    //calculate each and every item
    $('#jquerytable input').change(function() {

      //find the parent id so we know
      idName = $(this).attr('id');
      lastChar = idName.substr(idName.length - 1);

      jc = $('#jquerytablecosts').val();
      js = $('#jquerytablesell').val();
      jq = $('#jquerytablequantity').val();

      if (jc == '' || jc == 'undefined' || jc == null) {
        jc = 0;
      }
      if (js == '' || js == 'undefined' || js == null) {
        js = 0;
      }
      if (jq == '' || jq == 'undefined' || jq == null) {
        jq = 0;
      }

      jfc = jc * jq;
      jfs = js * jq;
      jmgn = 100 - ((jfc / jfs) * 100);

      if ($.isNumeric(lastChar) === false) {

        //get the values of the 3 items and then add them to the final results
        $('#jqueryTotalcost').html('&pound;' + jfc);
        $('#jquerySellingcost').html('&pound;' + jfs);
        $('#jquerymargin').html(jmgn.toFixed(2) + '%');

      }

    });

    $('#ubldone4').on('click', function(ev) {

      ev.preventDefault();

      $('.model-background').fadeOut(500);
      $('.ubl-section-5').hide();

    });

  });

});

Answer 1

对于那些刚接触JS的人来说，这是一个常见的错误，起初可能很难理解。发生这种情况的原因是，每次单击$('#anotherrowplease')时，您都会重新绑定$('#quottable')的点击处理程序。你可以通过多种方式解决这个问题。我会移动$('#anotherrowplease')处理程序的$('#quottable') 外部的点击处理程序，因为它只需要运行一次（而不是每次点击$('#quottable')）。

https://jsfiddle.net/DTcHh/24362/

有时您需要将事件侦听器附加到动态创建的内容，例如您要添加的新行中的输入。但是，您不希望继续重新绑定到现有元素。要解决这个问题，我会说大多数人选择使用Event Delegation，你也可以使用一个类来跟踪已经拥有侦听器的元素，并将:not(.myClass)添加到选择器的末尾，或者只是在重新绑定之前调用.off()。