获取下拉引导onclick Jquery函数的值[重复]

Question

我的 HTML 文件中有一个表格，其中一列中有一个来自引导程序的按钮组件，当单击按钮时，会出现一个下拉菜单，其中包含三个选项 - “中”、“低”、“服务请求”。单击此项目时，我正在尝试获取单击的项目的值。

$(".table table-hover table-condensed").on('click', '.dropdown-menu', function(e) {
  var id = $(this).attr('#mediumpriority');
  alert(id);
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-hover table-condensed">
  <thead>
    <tr>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
High
</button>
          <div class="dropdown-menu">
            <a id="mediumpriority" class="dropdown-item">Medium</a>
            <a class="dropdown-item">Low</a>
            <a class="dropdown-item">Service Request</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

当我点击“高”按钮时，我会看到三个选项的下拉菜单，如果我点击“中”，我希望会有一个警报显示“中”值：

<a id="mediumpriority" class="dropdown-item">Medium</a>

有人可以指出为什么我在运行并单击优先级“中”时没有收到此警报吗？

Answer 1

到 jQuery 选择器看起来不正确。应该是

$(".table.table-hover.table-condensed").on('click', '.dropdown-item', function(e) { 
    var menu = $(this).html();
    alert(menu);
});

Answer 2

此选择器错误：

$(".table table-hover table-condensed")
          ^           ^

使用这个： .table.table-hover.table-condensed

要获取 attr id，请使用： $(this).attr('id')

事件委托调用使用了错误的子选择器

$(".table table-hover table-condensed").on('click', '.dropdown-menu', function(e) {
                                                     ^

改用这个： .dropdown-item

$(".table.table-hover.table-condensed").on('click', '.dropdown-item', function(e) {
  var text = $(this).text();
  alert(text);
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-hover table-condensed">
  <thead>
    <tr>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
High
</button>
          <div class="dropdown-menu">
            <a id="mediumpriority" class="dropdown-item">Medium</a>
            <a class="dropdown-item">Low</a>
            <a class="dropdown-item">Service Request</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>