jQuery单击功能不起作用

Question

我正在尝试让我的代码单击并显示警报，但是该代码似乎无法正常工作。 我在这里编写了代码：

https://jsfiddle.net/MGames/9eu94Lau/1/

这是我的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>

这是单击后不显示警报的代码

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

我将不胜感激，帮助我找出我做错了什么。 谢谢。

编辑：由于我要澄清代码中存在的错误，因此这个问题有所不同。 这不是选择具有多个类的元素的重复...

Answer 1

在jQuery选择器中使用多个类需要多个句点，就像这样

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

小提琴

className之间没有空格，它匹配具有所有类的元素

Answer 2

CSS选择器在这里是错误的。 正确的选择器：

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

演示： https : //jsfiddle.net/9eu94Lau/3/

请参阅此以获取有关CSS选择器的更多详细信息： https : //css-tricks.com/multiple-class-id-selectors/

Answer 3

1个忘记添加. 每次上课之前。

2.删除所有类之间的空格（因为您正在尝试单个元素而不是父子元素的所有类）

工作片段：-

 $(".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> 

参考：- 如何在jQuery中选择具有多个类的元素？

Answer 4

只是用这个

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

Answer 5

这可能对您有用：

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

当我们有多个类时，然后添加。 元素访问时的操作员 。