我有一个动态生成的引导程序.dropdown-menu,但无法定位.dropdown-item子类。
我希望能够在用户单击它时在每个特定的.dropdown项目上切换一个类。
动态生成后的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项目可在所有项目上切换类。
我只想在用户单击的特定.dropdown项目上切换类
https://codepen.io/makloon/pen/mdboxEb
预先感谢您的任何建议
最佳答案
尝试这个:
// 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
,而是将其设置为显式使用复选框的状态。关于javascript - 从生成的 bootstrap 下拉菜单中找到下拉菜单项,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58099793/