jquery hover function not working after showing img

i have the code below: the first function shows an alternative image on mouse over using the rel atribute the second function takes a hidden div and shows the content in another place on the same page but when i hover the image the image doesn't change, the hover on the hidden div works, but after moving it on click in other place the hover doesn't work. I think it might be the document ready script because i alter the page after ready but i'm not sure, any advise? thank you

$(document).ready(function(){
$(function() {
    $('img[rel]').hover(function() {
        $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('rel')).attr('rel', $(this).attr('tmp')).removeAttr('tmp');
    }).each(function() {
        $('<img />').attr('src', $(this).attr('rel'));
    });;
});

$(function(){
    $('.id2').one("click",fun开发者_Python百科ction() {
         var newPara = $('#test').html();
        $('#big_photo').append(newPara);
    }); 
});

});

i think you should consider using sprites for the image switching, since it's a more elegant solution in my opinion.

• you don't need the rel attribute (which isn't a valid img attribute anyway)
• you don't have problems loading the second image since it's all loaded at once

also

$(document).ready(function(){

and

$(function() {

is the same and you only need one of them so:

$(function() {
   // all your jQuery code
});

would suffice.

ok, then for swapping src an rel on hover / out, this should work:

$('img[rel]').bind('mouseenter mouseleave',function() {
    var oldSrc = $(this).attr('src');
    $(this).attr('src', $(this).attr('rel')).attr('rel', oldSrc);
});

demo: http://jsfiddle.net/P37UX/1/