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

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&nbsp;type="button"&nbsp;id="standard-letter"&nbsp;class="btn&nbsp;btn-link">Standard&nbsp;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) {/*&nbsp; &nbsp; var grid = $("#BillingLettersGrid").data("kendoGrid"); grid.refresh();&nbsp; &nbsp; var dataItem = grid.dataSource.getByUid($(this).closest("tr").data("uid"));&nbsp; &nbsp; dataItem.FileName = "Standard Letter ";&nbsp; &nbsp; */&nbsp; &nbsp; console.log(this);})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="dropdown overflow show">&nbsp; &nbsp; <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown"&nbsp; &nbsp; &nbsp; &nbsp; aria-expanded="true">Actions<span class="caret"></span></button>&nbsp; &nbsp; <div class="dropdown-menu dropdown-menu-right show" s x-placement="bottom-end">&nbsp; &nbsp; &nbsp; &nbsp; <div><button type="button" class="btn btn-link">Standard Letter</button></div>&nbsp; &nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div></div>