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

當我們有多個類時，然后添加。 元素訪問時的操作員 。