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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 3015 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

append

商品

Demo

追加

11 条回复 2017-09-26 15:51:02 +08:00

AlwaysBee

2017-09-24 14:49:15 +08:00 via iPhone

代理事件、动态绑定

ahkxhyl

2017-09-24 14:55:42 +08:00

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

coolcoffee

2017-09-24 21:03:02 +08:00

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

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

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

hasbug

2017-09-25 09:05:25 +08:00

事件委托

Sapp

2017-09-25 12:23:24 +08:00

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

8355

2017-09-25 14:05:59 +08:00

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

ahkxhyl

2017-09-25 15:53:46 +08:00

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

swordne

2017-09-25 16:22:13 +08:00

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

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

ahkxhyl

2017-09-25 16:45:03 +08:00

@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

2017-09-26 15:49:09 +08:00

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

swordne

2017-09-26 15:51:02 +08:00

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