CSS Pseudo element jquery click event?

Question

I have an LI element "add folder" that uses a css pseudo before element to add a plus, like so:

enter image description here

the LI has a class of "add" and I have jquery that fires when "add" is clicked and CSS on the LI to show a cursor.

Of course, the pseudo element is not active. I realize that pseudo elements are not part of the DOM, but how would you handle this sort of thing (preferably without resorting to an IMG tag) so the words AND the plus mark can be clicked?

Here is the CSS for the plus:

li.add:before {
    content: "\002B";
    display: inline-block;
    padding: 0 5px;
    margin-right: 5px;
    background: $orangelight;
}

Just looking at that list item, the plus mark should be a child, not a sibling (which would solve your problem)... Perhaps refactor your markup? — Matthew Blancarte
– Matthew Blancarte, Commented Mar 6, 2013 at 18:55
The plus mark is not a sibling, it's assigned to the before pseudo element of the LI tag. — Steve
– Steve, Commented Mar 6, 2013 at 18:58
@Steve: Then it should work as is (i.e. event should fire even when the plus sign is clicked). If it doesn't, something else is wrong. — BoltClock
– BoltClock, Commented Mar 6, 2013 at 19:03

strah · Accepted Answer · 2013-03-06 19:02:18Z

3

It works perfectly fine here: http://jsfiddle.net/Un4gq/

$("li").on("click", function () {
    alert("click");
})

answered Mar 6, 2013 at 19:02

strah

6,7404 gold badges35 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

CSS Pseudo element jquery click event?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related