JQUERY在拖动新项目后重新计算总和

Question

我正在尝试计算在右列中拖动的元素的总数。这是可行的，但它只是计算该列中的两个默认元素。如果我拖动新项目，总数保持不变。我做了这个小提琴：https://jsfidle.net/ehkgcnyp/

$( function() {
$( "#sortable1, #sortable2" ).sortable({
  connectWith: ".connectedSortable"
}).disableSelection();

// Calculate badges
var sum = 0.0;
$('#sortable2 .badge-pill').each(function() {
    sum += parseFloat($(this).text());
});
//alert(sum);
$('#getTotal').click(function() {
  $('#grandTotal').html(sum);
});
});

我如何考虑新项目？

谢谢！

Answer 1

问题是当页面被加载时计算结果，而不是当你点击按钮时计算结果。

我将您的代码修改为：

 function sum() {
    var sum = 0.0;
    $('#sortable2 .badge-pill').each(function() {
      sum += parseFloat($(this).text());
    });
    return sum;
  }

  //alert(sum);
  $('#getTotal').click(function() {
    $('#grandTotal').html(sum());
  });

演示

null

$(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();

  // Calculate badges
  function sum() {
    var sum = 0.0;
    $('#sortable2 .badge-pill').each(function() {
      sum += parseFloat($(this).text());
    });
    return sum;
  }

  //alert(sum);
  $('#getTotal').click(function() {
    $('#grandTotal').html(sum());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <ul id="sortable1" class="connectedSortable list-group">
        <li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 1 <span class="badge badge-primary badge-pill">12</span></li>
        <li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 2 <span class="badge badge-primary badge-pill">12</span></li>
        <li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 3 <span class="badge badge-primary badge-pill">12</span></li>
        <li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 4 <span class="badge badge-primary badge-pill">12</span></li>
      </ul>
    </div>
    <div class="col-sm-6">
      <ul id="sortable2" class="connectedSortable list-group">
        <li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Drag items here</li>
        <li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 4 <span class="badge badge-primary badge-pill">12</span></li>
        <li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 5 <span class="badge badge-primary badge-pill">12</span></li>
      </ul>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-6 offset-sm-6">
      <div class="d-flex justify-content-between">
        <button id="getTotal" type="button" name="button" class="calculate btn btn-primary btn-lg">Calculate</button>
        <h2 id="grandTotal">0</h2>
      </div>

    </div>
  </div>
</div>