下拉菜单EventListener

时间:2015-06-11 15:24:17

标签: javascript jquery twitter-bootstrap

我试图获取菜单选项(下拉菜单)的文本值。到目前为止,我已经尝试过但没有成功;

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

下拉列表的EventListener,

$('#dropdownFloorplanGroups').on('click', 'li a', function(e) {
    alert($(this).text());                
});

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您正在将事件附加到错误的元素。尝试

$('.dropdown-menu').on('click', 'li a', function(e) {
    alert($(this).text());                
});

之前没有工作的原因是双重的

  1. 您尝试使用#访问类。应该使用.
  2. 来完成
  3. 班级dropdownFloorplanGroups本身就是 li。您应该从父容器委派
  4. &#13;
    &#13;
    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());
    });
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    &#13;
    &#13;
    &#13;