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

让我来解释一下它能做什么，应该做什么，不应该做什么。

这基本上是每次单击add row please按钮时向表中添加一行。

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

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

如果你再次退出，然后重新进入，它现在三倍的行。

这是一个jsfiddle这样你就能明白我的意思了

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