Jquery无法悬停附加html答案

【问题标题】：Jquery Unable to Hover append htmlJquery无法悬停附加html
【发布时间】：2011-01-04 10:38:38
【问题描述】：

我通过 jquery.append 将 HTML 附加到 DOM - 我的脚本如下（请原谅糟糕的代码）

myDiv = $("<div class='bottomright' title="+msgID+">"+msgTitle+msgContent+
"</div>").appendTo(document.body).fadeOut(0).slideDown('fast');
shown.push(msgID);

是否有不同的方法来解决悬停或附加问题（因为看着萤火虫，似乎 div 可以进入那里，并且它们完美显示）以便我可以使用悬停功能？

当我说我无法使用它时，我的意思是它实际上什么也没做，我写了以下内容但什么也没发生：

$(".bottomright").hover(function(){
    alert("text")
})

【问题讨论】：

标签： javascript jquery ajax hover append

【解决方案1】：

hover 接受两个函数作为参数：

第一个参数是当元素从鼠标获得焦点时执行的函数。第二个在元素失去鼠标焦点时触发。

-但是- 由于您是动态生成这些元素，因此您需要使用live:

live 不适用于hover，所以你不得不这样做：

$( '.bottomright' ).live( 'mouseover',  function() { alert( "in" ); } )
                   .live( 'mouseout', function() { alert( "out" ); } );

【讨论】：

【解决方案2】：

您需要使用live() 函数，因为您的 div 似乎是动态生成的：

$('.bottomright').live('hover', function() { alert( "text" ); }, function() {} );

【讨论】：

我不知道 live 是否真的适用于悬停。您可能必须创建两个实时事件（mouseover 和 mouseout）。
是的，我在看它......它没有说它有，但它也没有说它没有：docs.jquery.com/Events/live#typefn
来自api.jquery.com/hover：s.hover(h1, h2) 等价于s.mouseover(h1);s.mouseout(h2);。因此，我得出结论，悬停实际上不是一个事件，而是多个事件的组合。

【解决方案3】：

欢迎使用 Stack Overflow！

只是一个提示 - 使用顶部的 10101 按钮格式化代码确实很有帮助。例如：

myDiv = $(""+msgTitle+msgContent+"").appendTo(document.body).fadeOut(0).slideDown('fast'); 
shown.push(msgID);

关于您的问题，我猜您的“右下角”类对象可能不会占用任何空间。我注意到你的fadeOut和slideDown，也许还有其他东西导致div不占用任何空间？（检查萤火虫布局选项卡）。

另外，您是否在创建 div 后绑定悬停事件？如果是以前，它可能无法正常工作。在 jQuery 1.3 中，他们添加了 live(type,fn) 来绑定所有未来的对象。

【讨论】：

【解决方案4】：

我想我找到了答案 - 我所做的只是将悬停调用移动到生成 div 的位置下方，该位置位于 for 循环中。我进一步阅读，它不起作用的原因是因为它在加载 DOM 时激活了悬停，但是没有 div 可以将其附加到 - 通过每次创建 div 时运行它，它似乎工作得很好.也许有更好的方法来做到这一点？不过还是谢谢！我会试试 .live()

【讨论】：