Question

I have these input objects as follows,

 <input type='radio' class="but option" value='Yesterday'>
<input type='radio' class="but option" value='Last Week'>  
<input type='radio' class="but option" value='Last Month'>
<input type='radio' class="but option" value='All Time'>

and I have a jquery click event handler that says $(".but").click(function() {

These input objects are getting caught in this event handler and I’m wondering why when their class names are not “but”

Answer 1

If you have spaces in a class attribute then you’re assigning multiple classes, not one with a space in its name. So your inputs have two classes: “but” and “option”.

When you’re matching on class names (e.g. with jQuery) then it will match any element that has that class, even if the element has other classes as well. That’s why all your inputs (that all have a class “but” as well as another class) are matched.

You can read more about this for example in the relevant html4 and html5 documents at W3, or over at the MDN.