Jquery 3.4.1 .on () "щелчок" не срабатывает, когда селектор содержит идентификатор и класс

Question

Я следую учебному пособию по использованию Cordova, в котором используются Jquery 3.4.1 и Bootstrap 4.4.1.

Учебному пособию несколько лет, поэтому прежде чем попытаться связаться с автором учебника, я думал, что я бы попробовал "ТАК"! (ссылка на учебное пособие: http://codingfix.com/anatomy-of-a-cordova-application-navigation-system-the-top-navigation-bar/)

Я предполагаю, что это не имеет ничего общего с Cordova, и, вероятно, не с Bootstrap, a имеет чисто Jquery отношение, но я думал, что дам вам контекст.

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

$(document).on('click', '#cfx-topbar .cfx-topbar-menu', function() {
  alert("clicked!");
  var target = $(this).data('index');
  $('.carousel').carousel(target);
  switch (target) {
    case 0:
      //do here stuff specific to the view such as loading data...;
      break;
    case 1:
      //do here stuff specific to the view such as loading data...;    
      break;
    case 2:
      //do here stuff specific to the view such as loading data...;
      break;
    case 3:
      //do here stuff specific to the view such as loading data...;
      break;
  }
});

#cfx-topbar {
  background: #689F38;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 50px;
  z-index: 3;
}

cfx-topbar-menu {
  list-style: none;
  position: relative;
  padding: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="cfx-topbar">
  <ul id="cfx-topbar-menu">
    <li class="active"><a href="#" data-index="0"><i class="material-icons">dashboard</i></a></li>
    <li><a href="#" data-index="1"><i class="material-icons">group_work</i></a></li>
    <li><a href="#" data-index="2"><i class="material-icons">search</i></a></li>
    <li><a href="#" data-index="3"><i class="material-icons">share</i></a></li>
    <li><a href="#"><i class="material-icons">menu</i></a></li>
  </ul>
</div>

Этот код не сработает.

Что я пробовал:

Если я удалю '.cfx -topbar-menu 'из селектора ...

$(document).on('click', '#cfx-topbar', function () {

Он срабатывает.

Я уверен, что есть настоящая простая причина, почему это не работает, но я искал онлайн и не могу найти ничего, что соответствует моей дилемме, и это в учебнике. Может быть, Jquery библиотеки изменились, и эта комбинация была заменена?

Answer 1

Здесь есть две проблемы. Во-первых, атрибут, который вы пытаетесь выбрать, это id, а не class, поэтому селектор должен быть #cfx-topbar-menu, а не .cfx-topbar-menu. Во-вторых, атрибут data находится в дочернем элементе a элемента #cfx-topbar-menu, поэтому его необходимо включить в селектор. Попробуйте это:

$(document).on('click', '#cfx-topbar #cfx-topbar-menu a', function() {
  var target = $(this).data('index');
  console.log(target);
});

#cfx-topbar {
  background: #689F38;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 50px;
  z-index: 3;
}

cfx-topbar-menu {
  list-style: none;
  position: relative;
  padding: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="cfx-topbar">
  <ul id="cfx-topbar-menu">
    <li class="active"><a href="#" data-index="0"><i class="material-icons">dashboard</i></a></li>
    <li><a href="#" data-index="1"><i class="material-icons">group_work</i></a></li>
    <li><a href="#" data-index="2"><i class="material-icons">search</i></a></li>
    <li><a href="#" data-index="3"><i class="material-icons">share</i></a></li>
    <li><a href="#"><i class="material-icons">menu</i></a></li>
  </ul>
</div>

Answer 2

Ваш css отсутствует. перед именем класса и вашим UL есть идентификатор, но вы пытаетесь вызвать класс.

Попробуйте: $ (document) .on ('click', '# cfx-topbar # cfx-topbar-menu' , function () {……

Или измените идентификатор UL на класс.

HTH

Answer 3

In

<div id="cfx-topbar">
  <ul id="cfx-topbar-menu">

У вас есть id s, только.

В частности, внутренний ul имеет id, а не class.

Поэтому поменяйте селектор. От:

#cfx-topbar .cfx-topbar-menu

До:

#cfx-topbar #cfx-topbar-menu

Ваш фрагмент обновлен:

$(document).on('click', '#cfx-topbar #cfx-topbar-menu', function() {
  alert("clicked!");
  var target = $(this).data('index');
  $('.carousel').carousel(target);
  switch (target) {
    case 0:
      //do here stuff specific to the view such as loading data...;
      break;
    case 1:
      //do here stuff specific to the view such as loading data...;    
      break;
    case 2:
      //do here stuff specific to the view such as loading data...;
      break;
    case 3:
      //do here stuff specific to the view such as loading data...;
      break;
  }
});

#cfx-topbar {
  background: #689F38;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 50px;
  z-index: 3;
}

cfx-topbar-menu {
  list-style: none;
  position: relative;
  padding: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="cfx-topbar">
  <ul id="cfx-topbar-menu">
    <li class="active"><a href="#" data-index="0"><i class="material-icons">dashboard</i></a></li>
    <li><a href="#" data-index="1"><i class="material-icons">group_work</i></a></li>
    <li><a href="#" data-index="2"><i class="material-icons">search</i></a></li>
    <li><a href="#" data-index="3"><i class="material-icons">share</i></a></li>
    <li><a href="#"><i class="material-icons">menu</i></a></li>
  </ul>
</div>