动态添加到购物车用事件委托的写法及this指向的问题
效果图
image.png
html结构
image.png
image.png
css样式
image.png
点击新增按钮 输入商品名称及价格,新增商品到table的末尾
image.png
点击新增按钮,新增商品到table的末尾
image.png
由于有新增数据所以用事件委托的办法可以有效的节省代码量
因为购物车需要计算小计和总价,所以我们可以封装一个函数
image.png
封装加减
image.png
点击加减,计算小计
直接添加单击事件,新增的商品栏不可进行操作,只有初始的html里存在的可操作
image.png
此时只需要用事件委托的方法就可以让新增商品的加减按钮进行操作
父节点.on('事件名','子节点选择器','处理函数')
给加号添加事件 -->
image.png
给加减同时添加事件,链式写法
image.png
以上加减是正确的方法 这里是错误写法
image.png
到封装的函数里打印一下this
image.png
this指向window,所以这种方法不可取,
image.png
复选框,全选,反选按钮,事件委托的写法
image.png
输入商品名称和价格利用回车键添加商品
image.png