Почему addClass работает над одним элементом, но не с другим?

Question

Класс, «открытый», добавляется к элементу ul, но не к элементу dropdown#register.

<ul class="nav"></ul> 
<script> $("#register_dropdown").addClass("open"); </script> 
<script> $("ul").addClass("open"); </script> 
<span class="dropdown" id="register_dropdown"></span> 

Answer 1

$("#register_dropdown") возвращает пустой объект JQuery, как register_dropdown нет в DOM при выполнении этой строки.

Я не испытывал с Haml, но оборачивать ваши скрипты внутри DOM ready handler это путь:

%script $(function(){ $("#register_dropdown").addClass("open"); }); 

В обычной разметки она должна быть оказана как:

<script> $(function(){ $("#register_dropdown").addClass("open"); }); </script> 

Вы можете также используйте более подробный способ, если вы предпочитаете (тот же результат, что и выше):

$(document).ready(function() { 
    //DOM is ready, put your code here 
    $("#register_dropdown").addClass("open"); 
}); 

Это предотвратит запуск вашего кода до полной загрузки DOM. Вы можете просто переместить эту строку после добавления элемента в DOM, но это хорошая практика, чтобы манипулировать DOM после его готовности.

Reference