Bootstrap Carousel-Data-API 3.1.0到3.3.2，不再工作了

Question

I've updated bootstrap to 3.1.0 to 3.3.2 and updated several parts into my code to make it stable with the latest version of bootstrap.

What I am encountering is, even if the usage of Carousel-data-api is the same, it doesn't work for some reason. I changed 3.3.2 Carousel-data-api function to 3.1.0 (only this part) everything got back to normal.

Here is 3.1.0 version

  $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
    var $this   = $(this), href
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    $target.carousel(options)

    if (slideIndex = $this.attr('data-slide-to')) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  })

  $(window).on('load', function () {
    $('[data-ride="carousel"]').each(function () {
      var $carousel = $(this)
      $carousel.carousel($carousel.data())
    })
  })

}(jQuery);

Here is 3.3.2 version

  var clickHandler = function (e) {
    var href
    var $this   = $(this)
    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
    if (!$target.hasClass('carousel')) return
    var options = $.extend({}, $target.data(), $this.data())
    var slideIndex = $this.attr('data-slide-to')
    if (slideIndex) options.interval = false

    Plugin.call($target, options)

    if (slideIndex) {
      $target.data('bs.carousel').to(slideIndex)
    }

    e.preventDefault()
  }

  $(document)
    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

  $(window).on('load', function () {
    $('[data-ride="carousel"]').each(function () {
      var $carousel = $(this)
      Plugin.call($carousel, $carousel.data())
    })
  })

}(jQuery);

Here is how I call/use the method;

<div class="tab-pane box-products  tabcarousel<?php echo $id; ?> slide" id="tab-<?php echo $tab.$id;?>">
<?php if( count($products) > $itemsperpage ) { ?>
                <div class="carousel-controls">
                <a class="carousel-control left" href="#tab-<?php echo $tab.$id;?>"   data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#tab-<?php echo $tab.$id;?>"  data-slide="next">&rsaquo;</a>
                </div>
                <?php } ?>
...
...

//Output of $tab.$id will result like :tab-latest4
//So basically : <a class="carousel-control left" href="#tab-latest4"   data-slide="prev">&lsaquo;</a>

Usage : http://getbootstrap.com/javascript/#carousel-usage

I have no problem about loading JS, CSS objects.

Is there anything am I missing about usage? Thanks in advance!