CSS selector not working with jquery click function

Question

I am trying to assign a click event to span elements with class 'open' and 'appoint'. But I cannot get it to work. Code is as shown below.

HTML:

            <td><span id = "28" class='open'>28</span></td>
            <td><span id = "29" class='open'>29</span></td>
            <td><span id = "30" class='closed'>30</span></td>
            <td><span id = "31" class='appoint'>31</span></td>
            <td><span id = "32" class='closed'>32</span></td>

JS:

            $("span[class='open'][class='appoint']").click(function() {

                alert($(this).html());

            });

I have tried below combinations too, but nothing seems to work.

$("span.open.appoint")
$("span .open .appoint")
$("span .open, .appoint")

click function not responding on any of the span elements after applying above class selectors...any ideas??? — riya sharma
– riya sharma, Commented Aug 11, 2015 at 9:50

m4n0 · Accepted Answer · 2015-08-11 10:04:12Z

2

Problem with the code

$("span.open.appoint")

It selects appoint which has span and open in the same attribute list/node.

$("span .open .appoint")

Descendant selector, only when appoint is a child of open

$("span .open, .appoint")

Selects open only if it is a child of span

Solution:

Try with $("span.open, span.appoint")

You need to use multiple CSS selectors separated by ,

$("span.open, span.appoint").click(function() {
  $(this).css('background-color','lightblue');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><span id="28" class='open'>28</span>
</td>
<td><span id="29" class='open'>29</span>
</td>
<td><span id="30" class='closed'>30</span>
</td>
<td><span id="31" class='appoint'>31</span>
</td>
<td><span id="32" class='closed'>32</span>
</td>

edited Aug 11, 2015 at 10:04

answered Aug 11, 2015 at 9:27

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

riya sharma Over a year ago

I tried it, but click function is not at all working for any of the span elements.

m4n0 Over a year ago

If you check the output, it is working right? :) Seems like there are other problems to deal with.

m4n0 Over a year ago

I meant, check the output of my solution. It is working. There must be a problem with your existing code apart from this small portion. Conflicts maybe or the way you have included the script.

riya sharma Over a year ago

when I use $('span') it works, but after adding class names along with span as selector, click event doesn't work...

Sudharsan S · Accepted Answer · 2015-08-11 09:27:29Z

1

Use Multiselector in jquery

$("span.open, span.appoint").click(function() {
      alert($(this).html());
 });

answered Aug 11, 2015 at 9:27

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Collectives™ on Stack Overflow

CSS selector not working with jquery click function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related