Question

我有一个ul列表。当用户单击按钮时，

项将附加到列表中。这部分脚本工作正常，项目被附加到ul列表中。但我在第二部分有一个问题。每个按钮都有一个值（整数）。我将值相加并在字段中显示总和。这也没有错误。但是，只有当li项已经在ul中发布时才有效。对于动态li项，它不起作用。我需要一个.on（）或.live（）函数吗？

以下是脚本

//append to costs //
$(document).ready(function() {
  $('.button_grey').click(function() {
    var toAdd = $(this).attr('name');
    var toAdd2 = $(this).attr('value');
    $('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
  });
  $(document).on('click touchstart', '.items', function() {
    $(this).remove();
  });
});

//calculation addition //
$(document).ready(function() {
function totalList() {
    var subTotal = 0;

    jQuery("#totalsum li").each(function() {
      subTotal += parseFloat(
        jQuery(this).find('span').text()
        .replace('$ ', '')
        .replace(',', ''));

    });
    var subTotal = subTotal.toFixed(2);
    $('.numbercosts').html(subTotal);
  };
  totalList();
});

这里有html代码。

<div class="footer_div">
    <div class="panel-footer">
        <ul class="ul-panel" id="totalsum">
        </ul>
    </div>
    <div class="float_left">
        <span class="details"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Details</span>
    </div>
    <div class="float_right costsli">
        <span class="costs">
            geschätzte Kosten
        </span>
        <span class="numbercosts" id="numbercosts"></span><span class="costs"> CHF</span>
    </div>
</div>

按钮例如如下：

<button class="button_grey" value="950" name="Android">
                    <center>
                <i class="fa fa-android fa-5x" aria-hidden="true"></i>
                    <h4>
                        Android
                    </h4>
                        </center>
            </button>

Answer 1

从文档中提取函数totalList，然后在需要的地方调用它。

//calculation addition //
function totalList() {
    var subTotal = 0;

    jQuery("#totalsum li").each(function() {
      subTotal += parseFloat(
        jQuery(this).find('span').text()
        .replace('$ ', '')
        .replace(',', ''));

    });
    var subTotal = subTotal.toFixed(2);
    $('.numbercosts').html(subTotal);
  };
//append to costs //
$(document).ready(function() {
  totalList();
  $('.button_grey').click(function() {
    var toAdd = $(this).attr('name');
    var toAdd2 = $(this).attr('value');
    $('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
  });
  $(document).on('click touchstart', '.items', function() {
    //$(this).remove();
    totalList();//maybe here?
  });
});

Answer 2

的变化： -

1. totalList();和$('.button_grey').click(function() {

中的来电$(document).on('click touchstart', '.items', function() {

2.在$(document).ready(function(){..})

之外输入功能代码

$(document).ready(function() {
 $('.button_grey').click(function() {
    var toAdd = $(this).attr('name');
    var toAdd2 = $(this).attr('value');
    $('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
    totalList();
  });
  $(document).on('click touchstart', '.items', function() {
    $(this).remove();
    totalList();
  });
});
function totalList() {
	var subTotal = 0;
	jQuery(".numbs").each(function() {
	  subTotal += parseFloat(jQuery(this).text());
	});
	var subTotal = subTotal.toFixed(2);
	$('.numbercosts').html(subTotal);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_div">
    <div class="panel-footer">
        <ul class="ul-panel" id="totalsum">
        </ul>
    </div>
    <div class="float_left">
        <span class="details"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Details</span>
    </div>
    <div class="float_right costsli">
        <span class="costs">
            geschätzte Kosten
        </span>
        <span class="numbercosts" id="numbercosts"></span><span class="costs"> CHF</span>
    </div>
</div>

<button class="button_grey" value="950" name="Android"><center><i class="fa fa-android fa-5x" aria-hidden="true"></i><h4>Android</h4></center></button>

JQuery .on（）实时计算

2 个答案: