동적으로 이미지 및 호버 이벤트 추가

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

가 그런 이미지 노드를 만들 수 있습니다 : 그것은 귀하의 경우 이런 일처럼 보일 수 http://jsfiddle.net/pwGQX/

: 여기

$('#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>'); 
}); 

하는 데모입니다