javascript - 如何使用绑定(bind)事件在按钮单击时获取当前/此对象？

Question

我有以下代码:

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

.btn-yes 和 .btn-no 是附加到按钮的两个类。单击它们时，我希望将 btn-warning 类附加到该按钮，但这不起作用...

谁能告诉我我做错了什么？

Answer 1

您的选择器之间需要有一个逗号 ,:

'.btn-yes, .btn-no'

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

如果出现这种情况，则根据最新的 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-no 上绑定(bind)点击事件，其中有父级 .btn-yes。