JQuery Click Function Not Working

Question

I'm trying to get my code to click and show an alert, but the code doesn't seem to work. I've written the code here:

Here is my html:

<div class="add-cart-button-col col-right">
<a class="checkout-button nsg-button nsg-grad--heeb-orange" href="https://mycheckoutlinkgoeshere.com" data-query="https://linkcheckoutgoeshere.com">
                      CHECKOUT
                    </a>
                  </div>

And here is the code that does not to show the alert after clicking

$(".checkout-button nsg-button nsg-grad--heeb-orange").click(function() {
  alert('hohoho');
});

I would appreciate the help to find out what I'm doing wrong. Thank you.

Edit: This question is different due to the fact that I'm asking for clarification for an error that was present in my code. It's not a duplicate of selecting an element with multiple classes...

https://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes-in-jquery — Joey Zhang, Sep 04 '17 at 05:00
`.checkout-button nsg-button nsg-grad--heeb-orange` !== `.checkout-button .nsg-button .nsg-grad--heeb-orange` — , Sep 04 '17 at 05:21

score 2 · Answer 1 · answered Sep 04 '17 at 04:58

2

Using multiple classes in a jQuery selector is done with multiple periods, like so

$(".checkout-button.nsg-button.nsg-grad--heeb-orange")

FIDDLE

With no spaces between the classNames, it matches an element that has all the classes

answered Sep 04 '17 at 04:58

adeneo

312,895
29
395
388

score 2 · Answer 2 · answered Sep 04 '17 at 04:59

The CSS selector is wrong here. Correct selector:

 $(".checkout-button.nsg-button.nsg-grad--heeb-orange").click(function() {
    alert('hohoho');
   });

Demo: https://jsfiddle.net/9eu94Lau/3/

Refer this for more details on CSS selectors: https://css-tricks.com/multiple-class-id-selectors/

Alive to die - Anant · Accepted Answer · 2017-09-04T05:14:41.810

1 forgot to add. before each class.

2.Remove spaces in between all classes (as you are trying all classes of single element not parent-child)

Working snippet:-

$(".checkout-button.nsg-button.nsg-grad--heeb-orange").click(function() {
  alert('hohoho');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-cart-button-col col-right">
  <a class="checkout-button nsg-button nsg-grad--heeb-orange" href="https://mycheckoutlinkgoeshere.com" data query="https://linkcheckoutgoeshere.com">CHECKOUT</a>
</div>

Reference:-How can I select an element with multiple classes in jQuery?

score 1 · Answer 4 · answered Sep 04 '17 at 05:00

1

Just use this

$("a[class='checkout-button nsg-button nsg-grad--heeb-orange']").click(function() {
  alert('hohoho');
});

answered Sep 04 '17 at 05:00

Yash Parekh

1,513
2
20
31

score 1 · Answer 5 · answered Sep 04 '17 at 05:05

1

This may work for you:

$(".checkout-button.nsg-button.nsg-grad--heeb-orange").click(function() {
  alert('hohoho');
});

When we have multiple class, then we add . operator at the time of accessing the elements.

answered Sep 04 '17 at 05:05

Kunvar Singh

1,779
2
13
21

JQuery Click Function Not Working

5 Answers5