Question

HTML

<div id="test">
    <form method="post">
        <button name="type" value="add">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        <button name="type" value="subtract">
            <span class="glyphicon glyphicon-minus"></span>
        </button>
    </form>
</div>

的jQuery

$(document).ready(function () {
    $('#test').on('click', 'form button', function (event) {
        console.log(event.target.tagName);
        console.log(event.target.value);
        event.preventDefault();
    });
});

我希望能够看到点击了哪个按钮 - “添加”按钮或“减去”按钮。但是，根据您点击button元素的位置，点击事件可能是button本身或其中的span上的气泡。

示例控制台输出

BUTTON
subtract
SPAN
undefined
BUTTON
add
SPAN
undefined

获取与我在传递给'form button'函数的selector参数中指定的on()选择器匹配的元素的最佳方法是什么？

Answer 1

jQuery将this绑定到匹配元素：

$(document).ready(function () {
    $('#test').on('click', 'form button', function (event) {
        console.log(this.tagName);
        console.log(this.value);
        event.preventDefault();
    });
});

DEMO

来自jQuery文档：

当jQuery调用处理程序时，this关键字是对传递事件的元素的引用;对于直接绑定事件，这是附加事件的元素，对于委派事件this是匹配selector的元素。（请注意，如果事件来自后代元素，则this可能不等于event.target。）要从元素创建jQuery对象以便它可以与jQuery方法一起使用，请使用{{ 1}}。

Answer 2

您可以使用closest()来匹配closest()选择器引用的元素或其任何后代

$('#test').on('click', 'form button', function (event) {
   var $button=$(event.target).closest('button');
    console.log($button.val());        
    event.preventDefault();
});

编辑：不确定为什么我在原始问题中遵循目标方法。使用this更有意义。但是，在某些情况下，您需要确定目标是选择器还是后代，因此将答案保留为

的 DEMO

获取jQuery on（）的选择器参数匹配的元素

2 个答案: