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

問題是，下一個和上一個控制按鈕不起作用ING ..

能告訴我，爲什麼它不工作？ 請幫忙！

Answer 1

，你甚至不使用.live我會出現。嘗試：

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

或：

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