如何选择具有相同类名的按钮？

Question

如何选择具有相同类名的按钮。我在下拉菜单btn btn-link dropdown-toggle中有一个 class 的下拉菜单，我有一个带有 class 的按钮btn btn-link。我试图在下拉菜单中获取内部按钮，但它选择了 dropdoen 菜单本身。<div class="dropdown overflow show">    <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown"        aria-expanded="true">Actions<span class="caret"></span></button>    <div class="dropdown-menu dropdown-menu-right show" s x-placement="bottom-end">        <div><button type="button" class="btn btn-link">Standard Letter</button></div>        <div></div>    </div></div>我尝试使用以下 jQuery 代码获取内部 btn 类并触发以下 jQuery 但它选择了btn btn-link dropdown-toggle 而不是下拉项<button type="button" class="btn btn-link" onkeydown="setTypeStandardLetterChange()" onclick="setTypeStandardLetterChange()">Standard Letter</button>/div>$(document).on("click", ".btn.btn-link", function (e) {    var grid = $("#BillingLettersGrid").data("kendoGrid"); grid.refresh();    var dataItem = grid.dataSource.getByUid($(this).closest("tr").data("uid"));    dataItem.FileName = "Standard Letter ";})

Answer 1

尝试在父 div 类中添加特殊性.dropdown-menu

$(document).on("click", ".dropdown-menu .btn.btn-link", function (e) {

var grid = $("#BillingLettersGrid").data("kendoGrid"); grid.refresh();

var dataItem = grid.dataSource.getByUid($(this).closest("tr").data("uid"));

dataItem.FileName = "Standard Letter "; })

看起来第二个按钮关闭不正确后的div，应该关闭下面打开的div。

Answer 2

为了简化事情并避免取消查询中的第一个按钮的资格，为什么不给要查询的按钮一个 ID？ID 必须是唯一的，因此：

<button type="button" id="standard-letter" class="btn btn-link">Standard Letter</button>

在你的脚本中，$("#standard-letter").click()等等。

Answer 3

只需用作.btn.btn-link:not(.dropdown-toggle)选择器。

我已经用您的 HTML 尝试了以下代码，它有效

$(document).on("click", ".btn.btn-link:not(.dropdown-toggle)", function (e) {

/*

    var grid = $("#BillingLettersGrid").data("kendoGrid"); grid.refresh();

    var dataItem = grid.dataSource.getByUid($(this).closest("tr").data("uid"));

    dataItem.FileName = "Standard Letter ";

    */

    console.log(this);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown overflow show">

    <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown"

        aria-expanded="true">Actions<span class="caret"></span></button>

    <div class="dropdown-menu dropdown-menu-right show" s x-placement="bottom-end">

        <div><button type="button" class="btn btn-link">Standard Letter</button></div>

        <div></div>

    </div>

</div>