Cannot trigger jQuery .click() for button that contains certain text?

Question

I have a button:

 $('.add_to_cart span:contains("Choose a Size")').click(function() { console.log("it has been clicked") });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="submit" name="add" id="add-to-cart" class="action_button add_to_cart v-center" data-variantcount="44" data-label="Add to Cart" disabled=""> <span class="text">Choose a Size</span> </button>

However, this is never printing anything when I click it? You can see in this image that it is finding these elements but not triggering when clicked.

Answer 1

Are you loading the script after the DOM has loaded? Try:

$(function() {
  $('.add_to_cart span:contains("Choose a Size")').click(function () {
    console.log("it has been clicked")
   });
});

Answer 2

Could you try this?

$(document).on('click','.add_to_cart span:contains("Choose a Size")', function(){
console.log("it has been clicked");
});