Question

我正在尝试根据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元素上时，都没有任何反应。

有谁知道我做错了什么？

Answer 1

您需要确保在文档加载完成后发生事件分配，否则您的鼠标悬停事件也无法附加：

$(document).ready(function(){

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

});

这是一个有效的演示：http://jsfiddle.net/2mWb3/

Answer 2

运行此代码时，

#menu1尚未在DOM中。

将其更改为

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

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

Answer 3

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

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

jQuery mouseover不适用于li元素

3 个答案: