动态创建的元素上的事件绑定无法工作

Question

我正在处理购物车，我将好的信息存储在会话中。
我使用 ajax 在 html 页面中创建购物车，这样我就可以将商品添加到购物车中，并且 works.but 当我想从购物车中删除商品时它不能work.also，我必须刷新页面才能删除好
我的代码如下：
cart.php

 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);
    }
}

shoppcart.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>

对不起，我的英语不好！希望我把我的问题描述清楚，如果没有，我也把代码放在网上，地址：http://weixin.chenfw.me/mall/index.
请帮助我...

Answer 1

问题出在删除事件的选择器上。
您想要单击删除按钮，但此按钮是通过 dom 出现的，而不是通过文档加载出现的。

尝试将选择器更改为监听事件的文档。点击 selector_added。

$('#shoppingCartWrapper').find('.shoppingCartRemoveProductButton').on('click',fu‌nction(){ ...

至

 $(document).on('click', '#shoppingCartWrapper .shoppingCartRemoveProductButton', function() {...

如果我在控制台中尝试运行您的 ajax，它会按照您的预期正常工作。

动态创建的元素上的事件绑定无法工作

Event binding on dynamically created elements can not work

jquery

bind

element

dynamic