jQuery mouseover не работает для элемента li

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