从生成的引导程序下拉菜单中查找下拉项

Question

I have a dynamically generated bootstrap .dropdown-menu and I cannot target the .dropdown-item child class.

I want to be able to toggle a class on each specific .dropdown-item when a user clicks on it.

The html looks like this after is dynamically generated:

<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>

I have tried targeting it directly with:

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

but it doesn't work.

I read in an answer here: jquery selecting dynamic class id inside dynamically created div , that I needed to delegate with newly created elements and so I am able to target the dynamically generated .dropdown-menu with:

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

Clicking on each .dropdown-item toggles the class on all items.

I would like to only toggle the class on the specific .dropdown-item the user is clicking on

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

Thanks in advance for any advice

Answer 1

Try this:

// 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");
  }
});

Working example: https://codepen.io/mac9416/pen/yLBwKKv

The problem is that Bootstrap Tables prevents propagation of the click event. So we have to listen for an event that happens earlier - namely, mousedown .

And instead of using toggleClass , I've set it up to explicitly use the state of the checkbox.