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

Posted 2023-03-05

【中文标题】获取下拉引导onclick Jquery函数的值[重复]

【英文标题】：Get value of dropdown bootstrap onclick Jquery function [duplicate]

【发布时间】：2018-08-02 17:36:59

【问题描述】：

我的 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>

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

【问题讨论】：

#mediumpriority 不是属性。

【参考方案1】：

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

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

【讨论】：

这不起作用：我得到了“未定义”

我刚刚更新了我的答案。

【参考方案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>

【讨论】：

这与我想要的很接近，但是 id 输出了 'mediumpriority' 而我在 'Medium' 之后。下面已经回答了。

@RA19 嗯，你想要 HTML。我建议您使用 .text() 来避免 HTML 标签出现问题。答案已更新！