how to combine two selectors?

Question

in my example http://jsfiddle.net/radek/HnXC4/2/ I defined jQuery handler for click

• on button
• that have a class run

via $(":button, .run").click(function(){

how come the this button should NOT work button's clicked is fired too? It doesn't have class "run".

Answer 1

Try:

$(":button.run").click(function(){

$(":button, .run") will match any elements that are either buttons or have a CSS class of run .

Answer 2

You don't need the comma in between:

$(":button.run").click(function(){};

Answer 3

What you want is:

$(":button.run").click(function(){});

This means "all buttons that ALSO have the class 'run'". When you include a comma in the selectors, it means "all elements that are buttons, as well as all elements that have class 'run'", as you had here:

$(":button, .run").click(function(){});

For completeness, if you have a space in the selector without the comma, such as:

$(":button .run").click(function(){});

That means all elements with class 'run' that are descendents of buttons. Not sure buttons can have descendents, but you get the idea.