Making dynamic click

Question

On a page, I have multiple button but with same class, and I want to add class loading on each button click.

$(".btn").click(function() {
    $(".btn").addClass('loading');
    alert("button 1 clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
  <a href="#" cass="btn btn-test">Button 1</a>
  <a href="#" class="btn btn-test">Button 2</a>
  <a href="#" class="btn btn-test2">Button 3</a>
  <a href="#" class="btn btn-test2">Button 1</a>
</div>

How to handle for different button clicked so each time button is clicked the same alert will appear?

Do you want to add loading on each button when any of the buttons is clicked? — Riddhi
– Riddhi, Commented Aug 2, 2018 at 12:38

IronAces · Accepted Answer · 2018-08-02 12:39:22Z

3

You can make use of this operator. Within the below example, this refers to the current object being handled.

See Mozilla Docs

<div>
  <a href="#" cass="btn btn-test">Button 1</a>
  <a href="#" class="btn btn-test">Button 2</a>
  <a href="#" class="btn btn-test2">Button 3</a>
  <a href="#" class="btn btn-test2">Button 1</a>
</div>

$(".btn").click(function() {
    $(this).addClass('loading');
    alert("button 1 clicked");
});

answered Aug 2, 2018 at 12:39

IronAces

1,9011 gold badge28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Warner · Accepted Answer · 2018-08-02 13:30:42Z

You want the this keyword it refers to the object its within in this case the element clicked

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

$(".btn").click(function() {
    this.classList.add('loading')
});

.loading {background: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
  <a href="#" class="btn btn-test">Button 1</a>
  <a href="#" class="btn btn-test">Button 2</a>
  <a href="#" class="btn btn-test2">Button 3</a>
  <a href="#" class="btn btn-test2">Button 1</a>
</div>

AlexiAmni · Accepted Answer · 2018-08-02 12:37:21Z

0

use this keywoard this

$(".btn").click(function() {
    $(this).addClass('loading');
});

answered Aug 2, 2018 at 12:37

AlexiAmni

4022 silver badges15 bronze badges

Comments

Duma · Accepted Answer · 2018-08-02 12:38:45Z

0

$(".btn").on('click', function() {
    $(this).addClass('loading');
    alert("button clicked");
});

Give them the same class and it should work.

answered Aug 2, 2018 at 12:38

Duma

1942 silver badges12 bronze badges

1 Comment

Duma Over a year ago

Yea, my bad. Works either way

Collectives™ on Stack Overflow

Making dynamic click

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related