detecting a click on an image inserted through CSS content url()?

Question

Hi everyone,

I am adding a "remove me" icon to all elements on my page with class "myClass":

div myClass:after
{
   content: url('remove-me-icon.jpg')
}

Then I am using event delegation to detect clicks on all these icons by listening for clicks on the containing element:

$("#myDivThatContainsThoseOtherDivs").click(function(e){
if ($(e.target).is('.myClass:after'):
{
   // XXX... remove this element
}
});

However, the code in XXX gets triggered whenever the user clicks on a div with class myClass; is there a way for me to find out if the click specifically occurred on one of those icons that I am inserting with CSS's content property?

EDIT: from the answers below it seems like this does not work because the image is not getting added to the DOM. How can one achieve this same effect? Am I stuck with using jquery to

$("div.myClass").each(
/* 
function that appends html to this element defining a clickable
icon with class "myClickableIcon" 
*/);

$("#myDivThatContainsThoseOtherDivs").click(function(e){
if ($(e.target).is('.myClickableIcon'):
{
   // XXX... remove this element
}
});

and then later doing the same thing for every new div of class myClass that gets added? (I am not using one of those spiffy event handling plugins that add event handlers even for yet-to-be-created elements that match their selector.)

Or is there a smarter way to do this?

Thank you in advance for any help,

lara

Answer 1

No, it is not possible.

The inserted content has no DOM element. And events are bound to DOM elements.

You have to add an icon as a DOM element on its own.

Answer 2

According to Safari's Web Inspector the css :after doesn't alter the DOM, so I don't think that it would be possible to detect clicks form JavaScript.