Question

I am trying to find a way to dynamically add image with some hover function . thanks .

<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

Take a look into event delgation. That way you can have the event handler assinged in one place, and have it work with changing domnodes. It could look like something like this in your case:

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

Then you can create the image nodes:

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

Here’s a demo: http://jsfiddle.net/pwGQX/