V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ahkxhyl
V2EX  ›  JavaScript

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

  •  
  •   ahkxhyl · 2017-09-24 14:16:25 +08:00 · 2860 次点击
    这是一个创建于 2603 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我参照的 demo 链接 http://www.jq22.com/yanshi15391
    我修改后的的 demo: https://github.com/phpnodebug/test_cart.git

    问题描述:如果多条内容写死的话正常的 如果用 append 追加内容到节点 无论全选还是单独选中 点击增加数量 已选商品多少件 商品共计都是没有反应的 求指导 谢谢
    11 条回复    2017-09-26 15:51:02 +08:00
    AlwaysBee
        1
    AlwaysBee  
       2017-09-24 14:49:15 +08:00 via iPhone
    代理事件、动态绑定
    ahkxhyl
        2
    ahkxhyl  
    OP
       2017-09-24 14:55:42 +08:00
    @AlwaysBee 谢谢您的回答 我 js 玩的不是很熟练
    coolcoffee
        3
    coolcoffee  
       2017-09-24 21:03:02 +08:00
    因为你后面生成的元素没有绑定到事件。

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

    高级一点的就是只给新增加的元素绑定,或者使用事件委托。
    hasbug
        4
    hasbug  
       2017-09-25 09:05:25 +08:00
    事件委托
    Sapp
        5
    Sapp  
       2017-09-25 12:23:24 +08:00
    事件代理,你这个绑定方式只是绑定了当前的,新增的当然不会有。
    8355
        6
    8355  
       2017-09-25 14:05:59 +08:00
    简单点解释就是你每次做过对购物车内商品修改后再运行一下计算的代码就好了.
    ahkxhyl
        7
    ahkxhyl  
    OP
       2017-09-25 15:53:46 +08:00
    @8355 我试过了 不行的 这样做 好像把写死的部分也影响到了
    swordne
        8
    swordne  
       2017-09-25 16:22:13 +08:00
    jquery 的动态事件绑定
    $(document).on('click', 'selector', funtion(){ //do.....})

    这样 JS 追加的内容也可以绑定上事件。
    ahkxhyl
        9
    ahkxhyl  
    OP
       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
        10
    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
        11
    swordne  
       2017-09-26 15:51:02 +08:00
    @ahkxhyl
    甚至你的 gelegate 这个方法都不在 onload 里,也就是当 js 加载到这里的时候就开始绑定事件了。那么你后期追加的 li 元素必然和 click 事件没有关系了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1948 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 00:32 · PVG 08:32 · LAX 16:32 · JFK 19:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.