Меню не сползает на кнопку

Question

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

Вот код:

Проверьте текущий экран (окно на данный момент) размер и вызвать функцию, которая захватывает файлы:

var windowWidth = $(window).width(); //Will be screen.width later, using window for testing 

if (windowWidth < 550) { 

    getPhpFile('mobilemenu', '#main-nav-container', 'insertAfter'); 
    getPhpFile('mobmenuimg', '#main-nav-container', 'append'); 
} 

Эта функция захватывает файлы и вызывает функцию, которая добавляет его в HTML в случае успеха:

function getPhpFile(filename, selector, method) { 

    $.ajax({ 
     url : "includes/" + filename + ".php", 
     type: "POST", 
     success: function(data, textStatus, jqXHR) { 

      appendToHtml(data, selector, method); 
     }, 
     error: function (jqXHR, textStatus, errorThrown){ 
      console.log('Unable to get the requested files.'); 
     } 
    }); 
} 

Добавляет данные из захваченного файла в формате HTML:

function appendToHtml(data, selector, method) { 
     var element = $('' + selector + ''); 

    switch (method) { 
     ... 
     //Some removed cases here 
     ... 
     case 'append': element.append(data); 
         break; 

     case 'insertAfter': $(data).insertAfter(element); 
         break; 
    } 
} 

Это то, что делает меню выскользнуть:

$('#mobile-nav-btn').on('click', function() { 

    if ($('#mobile-nav-container').is(':hidden')) { 
     $('#mobile-nav-container').stop().show().animate({left: 0}, 'slow'); 
    } 
    else { 
     $('#mobile-nav-container').stop().animate({left: -150}, 'slow', function() { 
      $('#mobile-nav-container').hide(); 
     }); 
    } 
}); 

я сузил свой поиск до того, что он не может найти #mobile-nav-btn по некоторым причинам. Это потому, что скрипт работает, когда я использую что-то другое, кроме кнопки, чтобы вызвать функцию скольжения. Я нахожу это немного странным, хотя, поскольку кнопка и меню на самом деле находятся в разметке, когда я проверяю консоль, и я не запускаю сценарий до тех пор, пока разметка не появится, поскольку она запускается через событие click. Я попытался использовать window.onload = init для скользящего скрипта, но ничего не сделал. Все включено в функцию $(document).ready. Я действительно зациклился на том, как исправить это, чтобы все советы о том, что я должен делать?

Answer 1

Вы пытаетесь связать свое событие с элементом, который не существует. Вы можете использовать делегирование событий на родительский элемент кнопки навигации с помощью синтаксиса делегирования событий:

$('parent-element').on('click','#mobile-nav-button', function(){ ....

Или вы должны связать свои события после того, как вы добавили эти элементы в DOM.