Найти выпадающий элемент из сгенерированного выпадающего меню начальной загрузки

Question

У меня есть динамически сгенерированный загрузчик .dropdown-menu , и я не могу настроить таргетинг на .dropdown-item дочерний класс.

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

HTML выглядит следующим образом после того, как динамически генерируется:

<div class="dropdown-menu">
 <label class="dropdown-item">
  <input type="checkbox" data-field="name" value="1" checked="checked">
  <span>name</span>
 </label>

 <label class="dropdown-item">
  <input type="checkbox" data-field="price" value="2" checked="checked">
  <span>price</span>
 </label>

 <label class="dropdown-item">
  <input type="checkbox" data-field="column1" value="3" checked="checked">
  <span>column 1</span>
 </label>
</div>

Я пыталсянацеливаясь на него непосредственно с помощью:

$(".dropdown-item").click(function(){
 $(this).toggleClass("item-selected");
});

, но это не работает.

Я прочитал ответ здесь: jquery для выбора динамического идентификатора класса внутри динамически создаваемого div ,что мне нужно было делегировать только что созданные элементы, и поэтому я могу настроить динамически генерируемое .dropdown-menu с помощью:

$(document).on('change',"[class*=dropdown-menu]", function() {
 alert("You clicked on a .dropmenu-item!");
 $(this).children(".dropdown-item").toggleClass("item-selected");
});

Нажав на каждый .dropdown-item переключает класс на все элементы.

Я хотел бы переключать класс только на конкретный .dropdown-item , на который пользователь нажимает

https://codepen.io/makloon/pen/mdboxEb

Заранее спасибо за любые советы

Answer 1

Попробуйте:

// Initialize all to selected, since that's the default state.
$('.dropdown-item').addClass('item-selected');

// Use `mousedown` since Bootstrap Tables prevents propagation of `click`.
$('.dropdown-item').on('mousedown', function(e) {
  // This runs _before_ the checkbox is checked/unchecked.
  if ($(this).find('input').is(':checked')) {
    $(this).removeClass("item-selected");
  } else {
    $(this).addClass("item-selected");
  }
});

Рабочий пример: https://codepen.io/mac9416/pen/yLBwKKv

Проблема заключается в том, что Bootstrap Tables предотвращает распространение события click.Таким образом, мы должны выслушать событие, которое происходит раньше, а именно mousedown.

И вместо использования toggleClass я настроил его для явного использования состояния флажка.