jquery - 动态添加图片和悬停事件

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

看看事件委托。这样，您可以将事件处理程序分配在一个地方，并让它与不断变化的 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/

Answer 2

我需要更多细节，但很快，您可以使用 jQuery 的 .hover 事件；

    $("#imagesList").hover(
      // prepend the image on hover
      function() {
          $( this ).prepend( $( "<span><img src='image-x.jpg'></span>" ) );
        },
      // Remove the image when mouse leaves
        function() {
          $( this ).find( "span:first" ).remove();
      }
    );