当页面上具有相同选择器的多个按钮时，检查究竟点击了什么按钮答案

【问题标题】：Check what exatly button clicked, when multiple buttons with the same selector on page当页面上具有相同选择器的多个按钮时，检查究竟点击了什么按钮
【发布时间】：2015-05-06 13:10:20
【问题描述】：

我有两个具有相同选择器类的按钮。当我这样做时：

$('.my_button').click(function() {
    console.log(1);
});

，然后单击它记录1 的按钮两次，就像我单击了两个按钮而不是单个按钮一样。所以我的问题是：在 JS 中有某种方法可以只获取我点击的那个按钮，而不分配像 id 这样的唯一选择器。我是JS的新手，有人可以解释一下吗？我发现了相关问题here。谢谢！

编辑：

我让按钮有点不同。是的，它只返回一个按钮，但为什么点击触发器可以工作两次。控制台日志记录两次。

【问题讨论】：

为什么不用id代替class
@Optimus，我重新声明了 Symfony2 表单主题，由于某些原因我无法覆盖 id，但我可以将类附加到按钮主题。
可以给这个按钮添加name属性吗
这两个按钮之间有什么区别，比如值、名称或任何东西
@Optimus，他们不一样

标签： javascript jquery onclick

【解决方案1】：

为您的按钮分配不同的 id

 <input type="button" class="my_button" id="test" value="Test"/>
 <input type="button" class="my_button" id="test2" value="Test1"/>

 alert($(this).attr("id"));

【讨论】：

【解决方案2】：

如果你的html是这样的

<button class="my_button">Test</button>
<button class="my_button">Test1</button>

然后使用这个脚本

$('.my_button').click(function() {
if(this.innerHTML ==="Test")
    console.log(1);
else
console.log(2);
});

或者如果你的html是这样的

<input type="button" class="my_button" value="Test"/>
<input type="button" class="my_button" value="Test1"/>

然后使用这个脚本

$('.my_button').click(function() {
if($(this).val() ==="Test")
    console.log(1);
else
console.log(2);
});

【讨论】：

【解决方案3】：

试试这个：

<button class="my_button">Content1</button>
<button class="my_button">Content2</button>

<script>
$( ".my_button" ).click(function( event ) {
console.log(1);
});
</script>

https://jsfiddle.net/nt9ryeyr/5/

【讨论】：

啊哈哈哈哈，我还是得到了两个结果
这个在控制台 1 上只打印一次
我想我没有明白你到底想做什么。您想在单击具有相同类的每个按钮时打印不同的内容吗？

【解决方案4】：

在你的函数代码中使用this

$('.my_button').on('click',function() {
    var tempContainer=$(this).parent();
    alert($(tempContainer).html());   // you ll see that you are showing the code where exists your clicked button
});

【讨论】：

console.log($(this).attr('class')) 等于 2 my_button
@excluded_once 看看我的更新，了解我想说什么
我收到两个带有两个按钮的 html 的警报
@excluded_once 将此代码与 'live' 或 'on' 一起使用。现在它可以工作了，我编辑了我的答案
我不明白为什么点击会工作两次。它控制台记录同一按钮的两次内容。

【解决方案5】：

试试这个：-

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".p").click(function(e){
        alert($(e.currentTarget).attr("value"));//button text on which you clicked
    });
});
</script>
</head>
<body>

<input type='button' class="p" value='test'/>

</body>
</html>

【讨论】：

【解决方案6】：

每个事件监听器都接收到事件，该事件带有事件目标。试试下面的例子。

$('.my_button').click(function(e) {
    console.log(e);
    console.log(e.currentTarget);
    console.log($(e.currentTarget));
});

【讨论】：

它为第一个和第二个按钮返回两个对象。