Почему моя функция click () работает только для изменения размера?

Question

Я схожу с ума. Как вы можете увидеть ниже фрагмент кода - все работает хорошо. Но не в моем проекте. В моем проекте работает только код в resize (). Когда я изменяю размер окна - хорошо, это хорошо, я могу добавить и удалить класс 'open', нажав на элемент. Но если я обновлю sh страницу и не изменю размер окна - я не смогу добавить класс. Ничего не могу сделать Я провожу несколько часов с этой вещью. Кто-нибудь может мне помочь? Почему не работает?

(function ($) {
  $('.nav-item').on('click', function() {
    $(this).toggleClass('open');
    $(this).siblings().removeClass('open');
  });

  $(window).resize(function() {
    if($(window).width() < 1200) {
      $('.nav-item').on('click', function() {
        $(this).toggleClass('open');
        $(this).siblings().removeClass('open');
      });
    }
  });
})(jQuery);

.open {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="main-menu">
  <li class="nav-item">
     <span class="nav-link">Menu item 1</span>
  </li>
  <li class="nav-item">
     <span class="nav-link">Menu item 2</span>
     <ul class="dropdown-menu">
        <li class="dropdown-item">
           <span>Menu item 2 subitem 1</span>
        </li>
        <li class="dropdown-item">
           <span>Menu item 2 subitem 2</span>
        </li>
     </ul>
  </li>
  <li class="nav-item">
     <span class="nav-link">Menu item 3</span>
     <ul class="dropdown-menu">
        <li class="dropdown-item">
           <span>Menu item 3 subitem 1</span>
        </li>
        <li class="dropdown-item">
           <span>Menu item 3 subitem 2</span>
        </li>
     </ul>
  </li>
</ul>

Я работаю с Drupal 8 CMS (если это важно - но я работал с jQuery, click () и Drupal milion раз, и это было всегда хорошо.

Answer 1

Причина, по которой он работает во фрагменте, но не в вашем коде, заключается в том, что фрагменты SO автоматически помещают jQuery logi c в обработчик событий document.ready, который гарантирует, что DOM загрузил до код работает.

Однако ваш код выполняется в IIFE , а не в обработчике событий document.ready, поэтому вы пытаетесь привязать события к элементам, которые еще не существуют. Только когда событие resize происходит, событие связывается и начинает работать.

Чтобы исправить это, замените IIFE обработчиком document.ready:

jQuery(function($) {
  $('.nav-item').on('click', function() {
    $(this).toggleClass('open').siblings().removeClass('open');
  });
})

.open {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="main-menu">
  <li class="nav-item">
    <span class="nav-link">Menu item 1</span>
  </li>
  <li class="nav-item">
    <span class="nav-link">Menu item 2</span>
    <ul class="dropdown-menu">
      <li class="dropdown-item">
        <span>Menu item 2 subitem 1</span>
      </li>
      <li class="dropdown-item">
        <span>Menu item 2 subitem 2</span>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <span class="nav-link">Menu item 3</span>
    <ul class="dropdown-menu">
      <li class="dropdown-item">
        <span>Menu item 3 subitem 1</span>
      </li>
      <li class="dropdown-item">
        <span>Menu item 3 subitem 2</span>
      </li>
    </ul>
  </li>
</ul>

Answer 2

Я искал еще несколько часов в Inte rnet и нашел решение с помощью Drupal.behaviours ... Я не знаю, как и почему это работает, почему в этом проекте этот простой jQuery код (снизу) и из моего поста, это то же самое) не работает, но в других проектах Drupal работает хорошо ... Я не знаю. Может быть, кто-то может сказать мне. Я не знаю.

Версия с:

jQuery(function($) {
  ...
});

вместо:

(function ($) {
  ...
})(jQuery);

также не работала.

Так что я удалил весь мой код:

(function ($) {
  $('.nav-item').on('click', function() {
    $(this).toggleClass('open');
    $(this).siblings().removeClass('open');
  });

  $(window).resize(function() {
    if($(window).width() < 1200) {
      $('.nav-item').on('click', function() {
        $(this).toggleClass('open');
        $(this).siblings().removeClass('open');
      });
    }
  });
})(jQuery);

и я добавил этот код:

(function ($) {
Drupal.behaviors.navclick = {
    attach: function (context, settings) {
      $('.nav-item', context).click(function () {
        $(this).toggleClass('open').siblings().removeClass('open');
      });
    }
  };
})(jQuery);

И теперь это работает, и при изменении размера окна, и после простого запуска страницы (ранее это не было работаю только на стрельбе). Почему? Я не знаю.