js 购物车追加 append 一行内容不能正常统计商品共计和已选商品多少件问题

[ahkxhyl]

我参照的 demo 链接 http://www.jq22.com/yanshi15391
我修改后的的 demo： https://github.com/phpnodebug/test_cart.git

问题描述：如果多条内容写死的话正常的 如果用 append 追加内容到节点 无论全选还是单独选中 点击增加数量 已选商品多少件 商品共计都是没有反应的 求指导 谢谢

[AlwaysBee]

代理事件、动态绑定

[ahkxhyl]

@AlwaysBee 谢谢您的回答 我 js 玩的不是很熟练

[coolcoffee]

因为你后面生成的元素没有绑定到事件。

先尝试每次元素新增后，把之前绑定的事件全部撤掉再次绑定，记得如果是用 jQuery，需要重新选择元素。

高级一点的就是只给新增加的元素绑定，或者使用事件委托。

[hasbug]

事件委托

[Sapp]

事件代理，你这个绑定方式只是绑定了当前的，新增的当然不会有。

[8355]

简单点解释就是你每次做过对购物车内商品修改后再运行一下计算的代码就好了.

[ahkxhyl]

@8355 我试过了 不行的 这样做 好像把写死的部分也影响到了

[swordne]

jquery 的动态事件绑定
$(document).on('click', 'selector', funtion(){ //do.....})

这样 JS 追加的内容也可以绑定上事件。

[ahkxhyl]

@swordne
function gelegate(action, selector, callback) {
var event = event || window.event;
if (document.addEventListener) {
document.addEventListener(action, function (event) {
if (selector === event.target.tagName.toLowerCase() || selector === event.target.className || selector === event.target.id) {
callback();
}
}, false);
} else if (document.attachEvent) {
document.attachEvent('on' + action, function (event) {
if (selector === event.srcElement.tagName.toLowerCase() || selector === event.srcElement.className || selector === event.srcElement.id) {
callback();
}
});
} else {
selector['on' + action] = callback();
}

}

gelegate('click', 'li', function () {
var $inputVal = $(this).prev('input'),
$count = parseInt($inputVal.val()) + 1,
$obj = $(this).parents('.amount_box').find('.reduce'),
$priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
$price = $(this).parents('.order_lists').find('.price').html(), //单价
$priceTotal = $count * parseInt($price.substring(1));
$inputVal.val($count);
$priceTotalObj.html('￥' + $priceTotal);
if ($inputVal.val() > 1 && $obj.hasClass('reSty')) {
$obj.removeClass('reSty');
}
//totalMoney();
});


我这样写的 但是貌似没触发

<li class="list_amount">
<div class="amount_box margin-top-bar">
<a href="javascript:;" class="reduce reSty">-</a>
<input type="text" value="1" class="sum">
<a href="javascript:;" class="plus">+</a>
</div>
</li>

[swordne]

@ahkxhyl
当然执行不了了。gelegate 你这个方法是在页面 onload 之后就执行了，你后面添加的商品，他们的+/- 操作块都是没有绑定这个事件的，不然你试试在 function gelegate(){alert(1);}试试，没有弹出吧。
用 jquery 或者 vue 等等的吧，原生的解决这个问题太麻烦，原生的需要在你每次 append<li>的时候先解除绑定的 click 事件再用 gelegate 绑定新的 click 事件。换其他的 js 框架都可以用动态绑定来解决，比如说 8 楼的那样。

[swordne]

@ahkxhyl
甚至你的 gelegate 这个方法都不在 onload 里，也就是当 js 加载到这里的时候就开始绑定事件了。那么你后期追加的 li 元素必然和 click 事件没有关系了。