Почему мое событие onClick не всегда срабатывает при нажатии?

Question

Мое главное меню отображается по-разному для разных размеров экрана.Он еще не закончен, но на данный момент, если область просмотра больше 1220px, отображается горизонтальная строка меню.Если область просмотра меньше, чем 1220px, она показывает значок справа и при щелчке на этом значке применяется класс «open», его высота изменяется от 0 до «auto» и, таким образом, он показывает содержимое своего меню..

Я использую jQuery для значка меню:

$(".burger-nav").on("click", function() {
$("#main-nav ul").toggleClass("open");
});

Теперь дело в том, что иногда эта функция срабатывает, когда на значок нажимают, а иногда нет.Я перепробовал множество сценариев (прокрутка вверх / вниз, расширение / закрытие меню при прокрутке, изменение размера экрана, пробовал разные страницы, ...), но я не могу найти последовательность, которая могла бы указать мне на источник ошибки,

Я начал с JavaScript и jQuery не так давно и с тех пор многому научился (я думаю), но я ни в коем случае не эксперт (как я уверен в моем кодировании).

В любом случае, это код функции для моего главного меню.

function checkWidth() {
    let windowWidth = $(window).width();
    let maxWidth = 1220;
    var menu = document.getElementById("main_menu");
    var logo = document.getElementById("mad-logo");

    if (windowWidth < maxWidth) {
      if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
        //mobile menu-icon
        $(".burger-nav").on("click", function(event) {
          event.preventDefault();
          $("#main-nav ul").toggleClass("open");
        });

        logo.width = '180';
        menu.style.backgroundColor = 'rgba(0,0,0,0.8)';

      } else {
        //menu-icon
        $(".burger-nav").on("click", function() {
          $("#main-nav ul").toggleClass("open");
        });

        logo.width = '250';
        menu.style.backgroundColor = 'rgba(0,0,0,0.8)';
      }

    } else if (windowWidth > maxWidth) {

      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        menu.style.backgroundColor = 'rgba(0,0,0,0.8)';
        logo.width = '200';
      } else {
        menu.style.backgroundColor = 'rgba(0,0,0,0)';
        logo.width = '300';
      }
    }
  }

Функция вызывается для document.ready, для resize и window.onscroll.

$(document).ready(function() {
  checkWidth();
}

  $(window).on('resize', function() {
    checkWidth();
  });

  window.onscroll = function() {
    checkWidth();
  };

Кажется, работают строки menu.style и logo.width.Кроме того, когда я console.log windowWidth, это значение кажется правильным.

Почему мое событие on.click не срабатывает всегда, когда щелкает значок с классом .burger-nav?