jQuery添加html与特定类的jQuery动作没有任何影响

Question

例如，为什么我会使用一些虚拟代码。

我有些jQuery的设置发送出去Ajax请求，并使用具有一类“activate_tooltip”

初始的jQuery一个div替换特定div的HTML被送出使用

$('.button').live('click', function() { 

    //Ajax request goes out 
    //Div gets replaced with content like so 
    //$('.response_div').html('<div class="activate_tooltip"></div>'); 

}); 

我有一个用于测试目的的.activate_tooltip类的侦听器设置，应该在发生悬停时向窗口发送警报。我使用firebug来验证div内容是否被添加到dom中（并且.activate_tooltip类在新添加的div中拼写正确）...但是悬停在新添加的div上却什么也不做。但是，页面上已存在的div在悬停时会激活警报。

任何想法？

Answer 1

既然你要添加的div动态，你应该使用delegate或on（jQuery的版本1.7+）事件对动态元素的工作。尝试这个。

使用delegate

$('.response_div').delegate('.activate_tooltip', 'mouseover', function() { 
    alert('Hovered'); 
}); 

使用on

$('.response_div').on('mouseover', '.activate_tooltip', function() { 
    alert('Hovered'); 
}); 

如果您对mouseover和mouseout事件相同的行为，那么你可以使用hover事件，而不是mouseover。

参考文献：

• delegate() - http://api.jquery.com/delegate/
• on() - http://api.jquery.com/on/