Question

我已经使用jquery在页面中动态添加了一个元素，并具有以下功能。

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

但是我不能在这个新元素上调用任何事件。

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

任何建议

Answer 1

您必须使用live()函数将事件附加到页面加载后添加到DOM的元素。

尝试

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

这是因为事件通常在DOM准备就绪时附加到元素上，如果之后添加元素，则它们没有附加事件。 Live（）使用事件冒泡来解决这个问题。

Answer 2

尝试

jQuery(".test").live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   });

Answer 3

通过执行

设置事件处理程序时

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

你只做一次（浏览器设置该函数作为所有对象的事件处理程序，在执行此行时出现“test”类。要为每个“test”元素设置一个处理程序，你应该使用intead

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

Answer 4

在动态创建的元素上绑定一个事件，jquery提供了两个函数来完成这个 -

delegate
live

您可以像使用delegate

live

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

委托直播的优点是你可以在委托中进行链接但不能在悬停中进行链接。

用jquery选择动态添加的元素...

4 个答案: