jQuery mouseover 不适用于 li 元素答案

【问题标题】：jQuery mouseover not working for li elementjQuery mouseover 不适用于 li 元素
【发布时间】：2011-10-10 03:13:43
【问题描述】：

我正在尝试基于 ul 元素创建一个菜单，该元素将在链接下方显示链接描述。

到目前为止，我有以下代码（简化了一点）

      echo '
<script>
        $("#menu_1").mouseover(function() {
            $("#description").replaceWith("test");
        });
</script>

<ul class="menu_top">
<li id="menu_1"><a href = "#">Test</a></li>
</ul>

<div id="description" class="menu_desc">&nbsp;
</div>

';

但是，每次我将鼠标移到 li 元素上时，什么都没有发生。

有谁知道我做错了什么？

【问题讨论】：

标签： jquery mouseover

【解决方案1】：

您需要确保在文档加载完成后您的事件分配发生，否则您的鼠标悬停事件也没有任何附加内容：

$(document).ready(function(){

$("#menu_1").mouseover(function() {
            $("#description").replaceWith("test");
        });

});

这是一个工作演示：http://jsfiddle.net/2mWb3/

【讨论】：

【解决方案2】：

运行此代码时，#menu1 尚未在 DOM 中..

改成

<script>
     $(function(){
        $("#menu_1").mouseover(function() {
            $("#description").replaceWith("test");
        });
      });
</script>

以便您的代码在 document.ready 事件上运行。

【讨论】：

$(function(){ 是 $(document).ready(function(){ 的简写吗？

【解决方案3】：

Javascript 代码在遇到时执行。这可能发生在文档实际准备好之前。在您的情况下，您尝试选择#menu_1 元素在它实际存在于文档中之前。因为您几乎肯定希望所有 jQuery 代码在文档准备好后运行，所以 jQuery 为您提供了一种快捷方式：

$(function () {
    // this code is run only after the whole document is ready to go
    $("#menu_1")...
});

【讨论】：

是的，这就是问题所在。我将它移到 div 之后，现在它工作得很好。
感谢您的所有回答。我因为没有看到这么明显的事情而感到愚蠢，但我真的很高兴人们如此迅速地做出反应并帮助我：D 谢谢，我真的很感激