動態添加圖像和懸停事件

Question

我想找到一種方法來動態添加圖像與一些懸停功能。謝謝 。

<ul id="imagesList"> 
    <li>No images found</li> 
</ul> 

$(function(){ 
      //load image array 
      var images = {'image1':'assets/img/linkedin_30px.png','image2':'assets/img/twitter_30px.png'}; 
      $.each(images, function(){ 
       ....? 
      }); 
     }); 

Answer 1

看看event delgation。這樣你就可以將事件處理程序分配到一個地方，並且可以在不斷變化的domnode中工作。它可能看起來像你的情況是這樣的：

$('#imagesList').on('hover', 'img', function(){ 
    // your hover event handler here 
}); 

然後你就可以創建映像節點：

$('#imagesList').html(''); 
var images = {'image1':'assets/img/linkedin_30px.png','image2':'assets/img/twitter_30px.png'}; 
$.each(images, function(i, src){ 
    $('#imagesList').append('<li><img src="'+src+'"></li>'); 
}); 

這裏有一個演示：http://jsfiddle.net/pwGQX/