Почему код jQuery не работает после организации с литералом объекта?

Question

Так что я пытался организовать свой код jQuery (который в настоящее время имеет все в $(document).ready()) путем реализации литерала объекта на #Menu, Но теперь делегирование событий, которое раньше работало, больше не работает.

HTML

<div id="Menu">
<header id="Menu-Header">
    <button id="Menu-Button" type="button" class="btn btn-default btn-lg button-menu" aria-label="Menu"> 
        <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
        <h1>Problems</h1> 
    </button>
</header>
...
</div>

JQuery

$(document).ready(function () {
    menu.init();
    ...
});

var menu = {
    $menu: $('#Menu'), $menuButton: $('#Menu-Button'), 
    init: function () {
        this.$menuButton.on('mouseenter', function () {
            this.$menuButton.children('.glyphicon-menu-hamburger').hide();
            this.$menuButton.children('h1').fadeIn(200);
        });
        this.$menuButton.on('mouseleave', function () {
            this.$menuButton.children('h1').hide();
            this.$menuButton.children('.glyphicon-menu-hamburger').fadeIn(200);
            console.log("is this even working");
        });
        console.log("menu init being called");
    }
};

И пока menu init being called печатается, другой оператор печати не появляется, что, я чувствую, указывает на то, что .on() не инициализируется правильно.

Я чувствую, что могу сделать опечатку или что-то в этом роде, но я не могу этого понять.

Если бы кто-нибудь мог помочь мне с этим, я был бы очень признателен!

JSFiddle

Answer 1

this в ваших обратных вызовов не указывает на menu, Он указывает на узлы DOM, которые инициировали событие.

Если вы хотите, чтобы обратные вызовы выполнялись в контексте вашего объекта, вы должны использовать $.proxy:

...on('mouseenter', $.proxy(function () {
  ...code...
}, this));

Кроме того, если вы выполните $('#Menu') или любой другой селектор jQuery до того, как на странице появятся узлы DOM, возвращаемые ими объекты будут пустыми коллекциями.

Инициализируйте ваши данные после того, как DOM будет готов, или просто запросите DOM как часть обратных вызовов.

Answer 2

Проблема здесь:

$menu: $('#Menu'), $menuButton: $('#Menu-Button'),

когда вы запрашиваете меню и кнопку меню до того, как документ будет готов. Если вы хотите использовать его так, как вы показали сверху, мое предложение будет Dynamic Objects:

var menu = {
    get $menu(){ return $('#Menu'); },
    get $menuButton(){ return $('#Menu-Button')},
}

Динамическое свойство - это свойство, которое оценивает значение, когда вы пытаетесь получить его значение. это означает, что запрос по тегу меню не будет вызывать, пока вы не получите значение $menu:

console.log(menu.$menu);

Еще одна вещь, которую стоит упомянуть, это this внутри вашей функции события, которая отличается от функции меню. для доступа к пунктам меню внутри этого вы можете просто использовать menu переменная или если вы думаете, что имя может измениться, вы можете присвоить это локальной переменной внутри вашей функции init, а затем использовать это как значение меню.