Question

我的HTML文件中有一个表，在其中一个列中我有一个来自bootstrap的按钮组件，当点击按钮时，下拉列表会出现三个选项 - “中”，“低”，“服务请求”。单击此项目时，我试图获取项目的值。

$(".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>

获取dropdown bootstrap onclick Jquery函数的值

2 个答案: