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

Posted 2023-05-08

【中文标题】从生成的引导程序下拉菜单中查找下拉项

【英文标题】：Find dropdown-item from generated bootstrap dropdown-menu

【发布时间】：2020-01-25 17:29:12

【问题描述】：

我有一个动态生成的引导程序 .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 selecting dynamic class id inside dynamically created 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

提前感谢您的任何建议

【参考方案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

问题是引导表阻止了click 事件的传播。所以我们必须监听一个更早发生的事件——即mousedown。

我没有使用toggleClass，而是将其设置为明确使用复选框的状态。

【讨论】：

感谢您的帮助。我忘了提到我确实尝试过，但无济于事。它没有找到 .dropdown-item 类。

你能在codepen之类的东西上设置一个最小的问题重现吗？

@MarcusWallace 更新了示例，也许是解决第二个错误的方法。

@MarcusWallace 我认为 Bootstrap Tables 正在阻止事件冒泡......我正在尝试寻找解决方法。

它适用于您的建议生成的 3 个复选框，但不适用于 Bootstrap Tables 生成的复选框