下拉菜单事件侦听器
Dropdown menu EventListener
我正在尝试获取菜单选项(下拉菜单)的文本值。到目前为止,我已经尝试过但没有成功;
var dropD= $('<div class="btn-group" style="right: 10px; margin: 0 auto; position: absolute"> <button class="btn fontSize btn-default dropdown-toggle" type="button" id="dropdownMenu1" style="border:none; background-color:transparent" data-toggle="dropdown" aria-expanded="true">Font-Size<span class="caret"></span></button></div>').appendTo(body);
var ul= $('<ul class="dropdown-menu" role="menu" style="min-width:10px; margin-left:30px"aria-labelledby="dropdownMenu1">').appendTo(dropD);
$('<li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">10</a></li>').appendTo(ul);
$(' <li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">12</a></li>').appendTo(ul);
$(' <li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">14</a></li>').appendTo(ul);
$(' <li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">16</a></li>').appendTo(ul);
以及用于下拉列表的事件侦听器,
$('#dropdownFloorplanGroups').on('click', 'li a', function(e) {
alert($(this).text());
});
有什么想法吗?
您将事件附加到错误的元素。尝试
$('.dropdown-menu').on('click', 'li a', function(e) {
alert($(this).text());
});
它以前不起作用的原因是双重
的- 您正在尝试访问带有
#
的类。它应该通过.
来完成 - 类
dropdownFloorplanGroups
本身就是li
。应从父容器委派
var dropD = $('<div class="btn-group" style="right: 10px; margin: 0 auto; position: absolute"> <button class="btn fontSize btn-default dropdown-toggle" type="button" id="dropdownMenu1" style="border:none; background-color:transparent" data-toggle="dropdown" aria-expanded="true">Font-Size<span class="caret"></span></button></div>').appendTo('body');
var ul = $('<ul class="dropdown-menu" role="menu" style="min-width:10px; margin-left:30px"aria-labelledby="dropdownMenu1">').appendTo(dropD);
$('<li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">10</a></li>').appendTo(ul);
$(' <li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">12</a></li>').appendTo(ul);
$(' <li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">14</a></li>').appendTo(ul);
$(' <li class="dropdownFloorplanGroups" role="presentation"><a role="menuitem" tabindex="-1" href="#">16</a></li>').appendTo(ul);
$('.dropdown-menu').on('click', 'li a', function(e) {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
相关文章:
- 如何在for循环中添加事件侦听器
- 未命中服务器发送的事件侦听器
- 如何覆盖原型中的事件侦听器
- 无法将事件侦听器附加到画布
- 如何在d3.js中自定义事件侦听器
- 在es6中,将带有回调的事件侦听器设置为可迭代的
- 事件侦听器未在chrome扩展中的options.js中启动
- IE8更改文本区域上的事件侦听器不工作
- 将事件侦听器添加到文档,而不是签入元素存在,然后添加事件侦听器
- javascript删除事件侦听器
- 我应该/如何清除mousemove JQuery事件侦听器
- 在JQuery中使用谷歌地图Api事件/侦听器
- 如何使用我的Jquery代码创建委托事件侦听器
- 'mousemove'画布中的事件侦听器-指针仅在最后一个矩形中更改
- 为什么此事件侦听器不工作
- 仅当类存在于Javascript中时才允许侦听器事件运行
- 不确定Google Maps的侦听器事件中值为何未定义
- 如何向控件添加侦听器事件
- 无法在地图单击侦听器事件上显示另一个地图
- Chrome运行时OnMessage侦听器事件未启动