jquery .live() 方法不起作用？

Question

我正在学习jquery方法。 live() ，我获得的技术越多，我就找不到我创建的技术的解决方案。

我尝试一些这样的代码:

$("div#content").load("content.html");

在content.html里面我放了一些像这样的代码:

<div id="slideshow">
    <ul class="slides">
        <li><img src="img/photos/1.jpg" alt="Marsa Alam underawter close up" /></li>
        <li><img src="img/photos/2.jpg" alt="Turrimetta Beach - Dawn" /></li>
        <li><img src="img/photos/3.jpg" alt="Power Station" /></li>
        <li><img src="img/photos/4.jpg" alt="Colors of Nature" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>

使用额外的javascript，如下所示:

$(window).load(function(){
    var supportCanvas = 'getContext' in document.createElement('canvas');
    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};

    setTimeout(function(){      
        window.console && window.console.time && console.time('Generated In');

        if(supportCanvas){
            $('#slideshow img').each(function(){
                if(!slideshow.width){
                    slideshow.width = this.width;
                    slideshow.height = this.height;
                }               
                createCanvasOverlay(this);
            });
        }

        window.console && window.console.timeEnd && console.timeEnd('Generated In');

        $('#slideshow .arrow').live("click", function(){
            var li          = slides.eq(current),
                canvas      = li.find('canvas'),
                nextIndex   = 0;

                if($(this).hasClass('next')){
                    nextIndex = current >= slides.length-1 ? 0 : current+1;
                }
                else {
                    nextIndex = current <= 0 ? slides.length-1 : current-1;
                }

                var next = slides.eq(nextIndex);

                if(supportCanvas){
                    canvas.fadeIn(function(){
                        next.show();
                        current = nextIndex;

                        li.fadeOut(function(){
                            li.removeClass('slideActive');
                            canvas.hide();
                            next.addClass('slideActive');
                        });
                    });
                }else {
                    current=nextIndex;
                    next.addClass('slideActive').show();
                    li.removeClass('slideActive').hide();
                }
        });

    },100);

    function createCanvasOverlay(image){
        var canvas          = document.createElement('canvas'),
            canvasContext   = canvas.getContext("2d");      
            canvas.width    = slideshow.width;
            canvas.height   = slideshow.height;

            canvasContext.drawImage(image,0,0);

        var imageData   = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;

        for(var i=0,z=data.length;i<z;i++){         
            data[i]     = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i]   = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i]   = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));          
            ++i;
        }

        canvasContext.putImageData(imageData,0,0);
        image.parentNode.insertBefore(canvas,image);
    }   
});

问题是，下一个和上一个的控制按钮不起作用..

可以告诉我为什么它不起作用吗？请帮忙!

Answer 1

我看来您甚至没有使用.live。尝试:

$("body").on("click", "#slideshow .arrow", function () {
    ...

或者:

$("body").delegate("#slideshow .arrow", "click", function () {
    ...