如何使用绑定事件在按钮单击时获取当前/this对象

How to get the current/this object on button click using bind event?

本文关键字：获取 对象 this 单击 绑定 何使用 事件 按钮      更新时间：2023-09-26

我有以下代码：

$(document).bind('click', '.btn-yes .btn-no', function() {
    $(this).toggleClass("btn-warning");
    alert("test"); // <-- this works...
});

CCD_ 1和CCD_。单击它们时，我希望btn-warning类附加到该按钮，但这不起作用。。。

有人能告诉我我做错了什么吗？

您需要在选择器之间使用逗号,

'.btn-yes, .btn-no'

只有当元素是在页面加载后动态生成的时，才应该使用事件委派。

如果是这样的情况，那么根据最新的jQuery库，首选方法是.on()。您可以在下面的代码段中看到这一点。

$(document).on('click', '.btn-yes, .btn-no', function() {
  $(this).toggleClass('btn-warning');
});
.btn-warning{background:red; color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn-yes'>Yes</button><button class='btn-no'>No</button>

问题：

当您在选择器中不使用逗号,时，例如在本例中，您实际上是在尝试将单击事件绑定到具有父.btn-yes的子.btn-no上。

试试这个：

$(document).bind('click','.btn-yes .btn-no',function(e){
        $(e.target).toggleClass("btn-warning");
});

'.btn-yes .btn-no'表示btn-no内部的btn-yes不分离元素。所以，用逗号分隔元素，并使用click事件。

我还建议您使用on而不是绑定方法：

$(document).on('click', '.btn-yes, .btn-no', function(){
    $(this).toggleClass("btn-warning");
});

如果您有jquery版本1.7+，请使用.btn-yes0方法

$(document).on('click', '.btn-yes,.btn-no', function() {
    $(this).toggleClass("btn-warning");
});
相关文章：