JQuery：获取<span>标签内的对象

Question

我对jQuery非常陌生。以下是我的部分代码：

<div class = 'buttons'>
    <span>
    <input type='button' value='BUTTON1' id='button1'>
    </span>
    <span>
    <input type='button' value='BUTTON2' id='button2'>
    </span>
</div>

使用jquery，我想打印出所点击按钮的id。我尝试了以下代码：

$(".buttons > span").click(function () {
    alert("YOU CLICKED" + this.id);
});

但我认为这是指span对象。这很奇怪，因为span对象怎么会有点击事件呢？或者说所有的jQuery对象都有"click"吗？

如何在span中获取按钮的id呢？

谢谢。

- Squall Leohart

---

几乎所有的DOM元素都允许处理鼠标事件。如果将处理程序绑定到“ span”元素，则“ this”将引用触发事件处理程序的DOM元素。 - Fabrício Matté

Answer 1

这个怎么样？

$(".buttons > span > input").click(function () {
    alert("YOU CLICKED" + this.id);
});

- John Girata

Answer 2

以下是另一种通过捕获事件目标元素来实现的方法：

$(".buttons > span").click(function (e) { 
    alert("YOU CLICKED" + e.target.id); 
}); 

- vulcan raven

Answer 3

$(".buttons > span").click(function () {
    alert("YOU CLICKED" + $('input[type=button]',this).prop('id'));
 });

或者你可以将事件绑定到按钮本身。

$(".buttons > span > input[type=button]").click(function () {
    alert("YOU CLICKED" + this.id);
 });

- Musa

---

逗号的作用是什么？$('input[type=button]',this) - Squall Leohart

@SquallLeohart 逗号用于分隔参数，第二个参数是要搜索的上下文，通常是文档根，但如果指定了上下文，则从该元素执行搜索。因此，$('input[type=button]',this) 表示选择所有类型为 button 的 input 元素，这些元素是 this 元素的后代。请参阅 http://api.jquery.com/jQuery/。 - Musa

它选择所有类型为按钮的输入？那么它如何知道我点击哪个按钮以打印出ID？ - Squall Leohart

@SquallLeohart 你忘记了 that are descendants of this element，this 表示被点击的 span 元素，它只有一个类型为 button 的后代元素。 - Musa