Check what exatly button clicked, when multiple buttons with the same selector on page

Question

I have a two buttons with the same selector class. When I do this:

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

, and then click on the button it log 1 two times, like I clicked both buttons instead single. So my question is: There exists some way in JS to get only that button what I clicked, without assign unique selector like id. I am newbien in JS, so can somebody explain me? I found related issue here. Thanks!

Edit:

I make buttons a little bit different. And yes, it returns only single button, but why click trigger works two times. Console log log two times.

@Optimus, I redeclare Symfony2 form theming, and for some reasons I cant override id, but I can append class to button theme. — nowiko, Mar 05 '15 at 08:45
is there any difference between this two button like value, name or anything — Optimus, Mar 05 '15 at 08:50

score 4 · Answer 1 · answered Mar 05 '15 at 08:33

4

Every event listener receives the event, which carries the event target. Try the below example.

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

answered Mar 05 '15 at 08:33

Mjh

2,904
1
17
16

it return two objects, for first and second button. – nowiko Mar 05 '15 at 08:37

Med.Amine.Touil · Answer 2 · 2015-03-05T08:57:25.250

3

use this inside your function code

$('.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
});

edited Mar 05 '15 at 08:57

answered Mar 05 '15 at 08:31

Med.Amine.Touil

1,225
2
11
15

`console.log($(this).attr('class'))` equal to `2 my_button` – nowiko Mar 05 '15 at 08:34
@excluded_once take a look at my update to understand what i m trying to say – Med.Amine.Touil Mar 05 '15 at 08:38
i getting two allerts with html of two buttons – nowiko Mar 05 '15 at 08:39
@excluded_once use this code with 'live' or 'on' . Now it will works, Iedited my answer – Med.Amine.Touil Mar 05 '15 at 08:58
I cant get why click works two times. It console log two times content of the same button. – nowiko Mar 05 '15 at 09:59

Umair Hanif · Answer 3 · 2022-08-17T06:55:57.677

3

Assign different id to your buttons

$(".my_button").on("click",function(){
  console.log($(this).attr("id"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

edited Aug 17 '22 at 06:55

answered Dec 16 '21 at 15:46

Umair Hanif

144
1
2

Frnnd Sgz · Accepted Answer · 2015-03-05T08:59:07.003

1

Try this:

<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/

edited Mar 05 '15 at 08:59

answered Mar 05 '15 at 08:50

Frnnd Sgz

236
1
4
19

ahahahhah, I still get two results – nowiko Mar 05 '15 at 08:54
this print on the console 1 only once – Frnnd Sgz Mar 05 '15 at 09:03
I think I didn't catch what exactly you want to do. Do you want to print a diferent while clicking on each of your buttons with the same class? – Frnnd Sgz Mar 05 '15 at 09:34

score 1 · Answer 5 · answered Mar 05 '15 at 08:54

Try this:-

<!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>

score 1 · Answer 6 · answered Mar 05 '15 at 09:04

if your html is like this

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

then use this script

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

or if your html is like this

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

then use this script

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

Check what exatly button clicked, when multiple buttons with the same selector on page

6 Answers6