关于此轮播代码的委托事件处理有什么缺陷？

Question

我有一个通过AJAX加载的页面。一切都在该页上工作，除了这个轮播：http://jsfiddle.net/neowot/n0v1sLk4/1/

当通过AJAX加载轮播时，您只能看到其中一个轮播的框，而“下一个”和“上一个”按钮不会执行任何操作。我已经阅读了事件处理但仍然迷失在这个旋转木马上。我非常感谢你的帮助。

来自JSFiddle的代码......

HTML

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>

<div class="carousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
    </ul>
</div>

CSS

.carousel {
    padding-top: 20px;
    width: 357px;
    overflow: hidden;
    height: 50px;
    position: relative;
}
.carousel ul {
    position: relative;
    list-style: none;
    list-style-type: none;
    margin: 0;
    height: 50px;
    padding: 0;
}
.carousel ul li {
    position: absolute;
    height: 25px;
    width: 50px;
    float: left;
    margin-right: 1px;
    background: #f2f2f2;
    text-align: center;
    padding-top: 25px;
}

JS

$(function () {
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;

    function numberOfElements() {
        var carWidth = carousel.parent().width();
        var elemWidth = carouselChild.width();
        return Math.floor(carWidth / elemWidth);
    }

    var moveWith = numberOfElements();

    itemWidth = carousel.find('li:first').width() + 1; //Including margin

    //Set Carousel width so it won't wrap
    carousel.width(itemWidth * carouselChild.length);

    //Place the child elements to their original locations.
    refreshChildPosition();



    //Set the event handlers for buttons.
    $(document).on('click', '.btnNext', function (event) {
        if (canClick) {
            canClick = false;

            //Animate the slider to left as item width 
            carousel.stop(false, true).animate({
                left: '-=' + itemWidth * moveWith
            }, 600, function () {
                //Find the first item and append it as the last item.
                for (var i = 0; i < moveWith; i++) {
                    clickCount++;
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', (((carouselChild.length - 1 + clickCount) * (itemWidth))));
                }
                //refreshChildPosition();
                canClick = true;
            });
        }
    });

    $(document).on('click', '.btnPrevious', function (event) {
        if (canClick) {
            canClick = false;
            //Find the first item and append it as the last item.
            for (var i = 0; i < moveWith; i++) {
                clickCount--;
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);
                console.log(itemWidth * (clickCount));
                lastItem.css('left', itemWidth * clickCount);
            }
            //Animate the slider to right as item width 
            carousel.finish(true).animate({
                left: '+=' + itemWidth * numberOfElements()
            }, 300, function () {
                canClick = true;
            });
        }
    });

    function refreshChildPosition() {
        carouselChild.each(function () {
            $(this).css('left', itemWidth * carouselChild.index($(this)));
        });
    }
});

谢谢。