jQuery on()方法绑定动态元素的点击事件-问答-阿里云开发者社区-阿里云

开发者社区> 小旋风柴进> 正文

jQuery on()方法绑定动态元素的点击事件

2016-03-26 08:21:30 2261 1

我正在做一个商城相关的项目,需要用到购物车。购物车的数据我存在了session里,但是在前端需要实时更新购物车的数据,所以动态的创建了元素。
在jquery中,要给动态元素绑定事件,我使用了on方法,但是该方法一直不生效,必须刷新页面才能删除购物车的数据,请大家帮忙看看。
项目使用的是ThinkPHP框架。

<?php
/**
 * 
 * @authors tudouya (http://www.php101.cn/)
 * @date    2015-04-08 01:37:39
 * @version $1.0$
 */
namespace Mall\Controller;
use Think\Controller;

class CartController extends Controller {
    public function __construct(){
        parent::__construct();

        // session(null);
        if(!isset($_SESSION['cart'])){
            $_SESSION['cart'] = array();
        }
    }

    public function index(){
        kd($_SESSION);
    }

    public  function addItem(){
        /*
         * TODO --- 安全方面的考虑
         */
        $good_id = intval(I('post.good_id'));

        if(isset($_SESSION['cart'][$good_id])){
            $_SESSION['cart'][$good_id]['good_num'] += 1;
            $html = '';
            $total_price = 0;
            foreach($_SESSION['cart'] as $k=>$v){
                $total_price += $v['good_price']*$v['good_num'];
                $html .= '<div class="shoppingCartProductWrapper"> <a  href="' . U('mall/index/gooddetail',array('id'=>$v['good_id'])) . '" class="shoppingCartProductImageWrapper">'.'<img src="'.$v['good_image'].'" class="shoppingCartProductImage" alt=""/></a><div class="shoppingCartProductInfoWrapper"> <a href="'.U('mall/index/gooddetail',array('id'=>$v['good_id'])).'" class="shoppingCartProductTitle">'.$v['good_name'].'</a><div class="shoppingCartProductButtonsWrapper"><input type="text" id="shoppingCartProductNumber-1" class="shoppingCartProductNumber" name="product-1" value="'.$v['good_num'].'" /><span class="shoppingCartProductPrice">'.$v['good_price'].'</span><a href="javascript:void(0)" class="shoppingCartRemoveProductButton"></a> </div></div></div>';
            }
            $html .= '<div class="shoppingCartInfoWrapper"><span class="shoppingCartProductsNumber">商品数量:'.count($_SESSION['cart']) . '</span><span class="shoppingCartProductsTotal">Total: ¥'.$total_price.'</span></div>';
            exit($html);
        }
        $good_name = I('post.good_name');
        $good_price = I('post.good_price');        
        $good_image = I('post.good_image');
        $good_num = intval(I('post.good_num'));
        $good = compact('good_id', 'good_name', 'good_price', 'good_image', 'good_num');
        $_SESSION['cart'][$good_id] = $good;

        $html = '';
        $total_price = 0;
        foreach($_SESSION['cart'] as $k=>$v){
            $total_price += $v['good_price']*$v['good_num'];
            $html .= '<div class="shoppingCartProductWrapper"> <a  href="' . U('mall/index/gooddetail',array('id'=>$v['good_id'])) . '" class="shoppingCartProductImageWrapper">'.'<img src="'.$v['good_image'].'" class="shoppingCartProductImage" alt=""/></a><div class="shoppingCartProductInfoWrapper"> <a href="'.U('mall/index/gooddetail',array('id'=>$v['good_id'])).'" class="shoppingCartProductTitle">'.$v['good_name'].'</a><div class="shoppingCartProductButtonsWrapper"><input type="text" id="shoppingCartProductNumber-1" class="shoppingCartProductNumber" name="product-1" value="'.$v['good_num'].'" /><span class="shoppingCartProductPrice">'.$v['good_price'].'</span><a href="javascript:void(0)" class="shoppingCartRemoveProductButton"></a> </div></div></div>';
        }
        $html .= '<div class="shoppingCartInfoWrapper"><span class="shoppingCartProductsNumber">商品数量:'.count($_SESSION['cart']) . '</span><span class="shoppingCartProductsTotal">Total: ¥'.$total_price.'</span></div>';

        exit($html);
    }

    public function removeItem(){
        $good_id = intval(I('post.good_id'));
        unset($_SESSION['cart'][$good_id]);

        $html = '';
        $total_price = 0;
        foreach($_SESSION['cart'] as $k=>$v){
            $total_price += $v['good_price']*$v['good_num'];
            $html .= '<div class="shoppingCartProductWrapper"> <a  href="' . U('mall/index/gooddetail',array('id'=>$v['good_id'])) . '" class="shoppingCartProductImageWrapper">'.'<img src="'.$v['good_image'].'" class="shoppingCartProductImage" alt=""/></a><div class="shoppingCartProductInfoWrapper"> <a href="'.U('mall/index/gooddetail',array('id'=>$v['good_id'])).'" class="shoppingCartProductTitle">'.$v['good_name'].'</a><div class="shoppingCartProductButtonsWrapper"><input type="text" id="shoppingCartProductNumber-1" class="shoppingCartProductNumber" name="product-1" value="'.$v['good_num'].'" /><span class="shoppingCartProductPrice">'.$v['good_price'].'</span><a href="javascript:void(0)" class="shoppingCartRemoveProductButton"></a> </div></div></div>';
        }
        $html .= '<div class="shoppingCartInfoWrapper"><span class="shoppingCartProductsNumber">商品数量:'.count($_SESSION['cart']) . '</span><span class="shoppingCartProductsTotal">Total: ¥'.$total_price.'</span></div>';
        exit($html);
    }
}
?>
  <!-- shopping cart wrapper start -->
    <form id="shoppingCartWrapper" class="shoppingCartWrapper" action="#" method="post">
      <fieldset>        
        <?php 
          $total_price = 0;
          foreach($_SESSION['cart'] as $k=>$v){
            $total_price += $v['good_price']*intval($v['good_num']);
        ?>
        <!-- shopping cart product starts -->
        <div class="shoppingCartProductWrapper"> 
          <a href="<?php echo DOMAIN.'/mall/index/gooddetail/id/'.$v['good_id'].'.html'; ?>" class="shoppingCartProductImageWrapper">
            <img src="<?php echo $v['good_image']; ?>" class="shoppingCartProductImage" alt=""/>
          </a>
          <div class="shoppingCartProductInfoWrapper"> 
            <a href="<?php echo DOMAIN.'/mall/index/gooddetail/id/'.$v['good_id'].'.html'; ?>" class="shoppingCartProductTitle"><?php echo $v['good_name']; ?></a>
            <div class="shoppingCartProductButtonsWrapper">
              <input type="text" class="shoppingCartProductNumber" name="product-3" value="<?php echo $v['good_num']; ?>"/>
              <input type="hidden" name="good_id" value="<?php echo $v['good_id']; ?>" />
              <span class="shoppingCartProductPrice">¥<?php echo $v['good_price']; ?></span><a href="javascript:void(0)" class="shoppingCartRemoveProductButton"></a> </div>
          </div>
        </div>
        <!-- shopping cart product ends --> 
        <?php } ?>

        <!-- shopping cart info wrapper starts -->
        <div class="shoppingCartInfoWrapper"> 
          <span class="shoppingCartProductsNumber">商品数量: <?php echo count($_SESSION['cart']); ?></span> 
          <span class="shoppingCartProductsTotal">Total: ¥<?php echo $total_price; ?></span> 
        </div>
        <!-- shopping cart info wrapper ends -->

        <div id="shoppingCartButtons" class="shoppingCartButtonsWrapper"><a href="" class="shoppingCartEmptyButton">清空</a>
          <input type="submit" value="去付款" id="shoppingCartCheckoutButton" class="shoppingCartCheckoutButton"/>
        </div>
      </fieldset>
    </form>
    <!-- shopping cart wrapper ends --> 
    <script type="text/javascript">
        $(function(){
          remove_url = "{:U('mall/cart/removeitem')}";
          $('#shoppingCartWrapper').find('.shoppingCartRemoveProductButton').on('click',function(){
            good_id = $(this).prev().prev().val();
            $.ajax({
              'url': remove_url,
              'type': 'post',
              'data': {'good_id': good_id},
              'success': function(data){
                    $('#shoppingCartButtons').prevAll().remove();
                    $('#shoppingCartButtons').before(data);
              }
            });
          });
        });
    </script>
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:15:03

    对于动态绑定元素可以这样写

    $(document).on('click', '.xxx', function() {
       // do something
    });

    $(document)可以改成要绑定事件元素的父节点

    .xxx 就是指的当前元素

    这样就可以实现事件的代理

    0 0
相关问答

162

回答

惊喜翻倍:免费ECS+免费环境配置~!(ECS免费体验6个月活动3月31日结束)

豆妹 2014-10-29 17:52:21 222977浏览量 回答数 162

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157069浏览量 回答数 145

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146768浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145606浏览量 回答数 31

2

回答

mySQL数据库报错You have an error in your SQL syntax

落地花开啦 2016-02-14 16:09:24 126374浏览量 回答数 2

33

回答

Win Server 2003-2016 加密勒索事件必打补丁合集

妙正灰 2017-05-15 10:44:38 277515浏览量 回答数 33

38

回答

安全组详解,新手必看教程

我的中国 2017-11-30 15:23:46 256860浏览量 回答数 38

294

回答

Linux Bash严重漏洞修复紧急通知(已全部给出最终修复方案)

qilu 2014-09-25 13:26:50 431605浏览量 回答数 294

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 302588浏览量 回答数 249

13

回答

游戏云精彩帖汇总

nono20011908 2014-08-22 11:00:12 203629浏览量 回答数 13
2728
文章
6591
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载