Question

按下特定按钮时，如何触发按钮单击事件（在本例中为“接受”按钮）。

我尝试了以下但没有取得什么成功：

的Javascript

$('.notification-expand .Request .active-item > .accept-button').click(function () {
    alert("hello");
});

HTML

<div class="notification-expand Request active-item" style="display: block;">
    <div class="notification-body"></div>
    <br>
    <p>
        <button type="button" class="btn btn-success accept-button btn-sm">Accept</button>
    </p>
    <div class="row">
        <div class="col-xs-6 expand-col">
            <button type="button" class="btn btn-warning barter-button btn-sm">Barter</button>
        </div>
        <div class="col-xs-6 expand-col">
            <button type="button" class="btn btn-danger reject-button btn-sm">Reject</button>
        </div>
    </div>
</div>

Fiddle here

Answer 1

您的选择器中有错误，它应如下所示：

$('.notification-expand.Request.active-item .accept-button').click(function () {
    alert("hello");
});

Answer 2

您需要连接所有没有空格的类来捕获目标按钮

$('button.accept-button', '.notification-expand.Request.active-item').click(function () {
    alert("hello");
});

查看更新后的snippet

请注意＆＃34; .className1.className2＆＃34; 的语法，而不是＆＃34; .className1 .className2＆＃34;

Answer 3

应该是这样的：

$('button.accept-button').click(function(){ ... });

如果这是整个代码

，那么确实没有必要下去整个列表

---- ----编辑

所以当有更多项目但只有1项有效时（我猜）然后只定位活动项目类：

$('div.active-item button.accept-button').click(function(){ ... });

Answer 4

只需给按钮一个id和引用即可。

<强> HTML

<button id="btnSubmitData"> Ok Button </button>

JQuery代码

$('#btnSubmitData').click(function(){ ... });

您还可以将多个按钮ID绑定到同一事件：

$('#btnAccept, #btnReject, #btnWarning').click(function () {
        alert("hello");
    });

查看更新的Working Fiddle。

Answer 5

尝试

$('.accept-button', $('.notification-expand.active-item')).click(function () {
    alert("hello");
});

或

$('.notification-expand.active-item')).find('.accept-button').click(function () {
    alert("hello");
});

当元素上有多个类时，按钮单击事件

5 个答案: