Question

I have dynamically added an element in page using jquery with following function.

function addtocart(popid)
{
    jQuery('#thumb'+popid+' button').attr("disabled", true);
    //jQuery('#thumb'+popid+' button').html("Added");
    position = jQuery('#cart').offset();
    source = jQuery('#thumb'+popid+' img').offset();

    jQuery('#thumb'+popid+' img').clone().css({'display':'block', 'position':'absolute','top':source.top,'left':source.left}).appendTo('body').addClass('animation');
    jQuery('.animation').animate(
        {'left': position.left, 'top':position.top},
        'slow',
        function(){
                jQuery(this).remove();
                jQuery('#cart').append('<li class="test">'+jQuery('#thumb'+popid+' .title').html()+'<a href="#">X</a></li>');
                jQuery.ajax({
                    url: "creatives.php?ajax=1&creativeid="+popid,
                    success:function(data){
                        jQuery('.itemstodwnload span').html(data);
                    }
                }); 
            }
        );
}

but i cannot call any event on this new element.

jQuery('.test').hover(function(){
            alert('asdf');
        });

any suggestion

Answer 1

when you set the event handler by doing

jQuery('.test').hover(function(){
            alert('asdf');
        });

you’re doing just once (the browser set that function as event handler for all the object with “test” class present at the time of executing this line. To have an handler setted for every “test” element, you should use intead

jQuery('.test').live('hover', function(){
            alert('asdf');
        });