2010-01-09 39 views
1

我在我的页面上的所有元素中添加了一个“删除我”图标,类为“myClass”:检测通过CSS内容url()插入的图像的点击?

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

然后我使用事件委派通过监听包含元素的点击来检测所有这些图标的点击次数:

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

但是,每当用户点击具有类myClass的div时,XXX中的代码就会被触发;有没有办法让我知道点击是否特别发生在上我用CSS的内容属性插入的那些图标之一?

编辑:从下面的答案似乎这不起作用,因为图像没有被添加到DOM。如何才能达到同样的效果?我是否坚持使用jquery

$("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 
} 
}); 

,然后为每个新的类myClass做同样的事情? (我没有使用那些添加事件处理程序的spiffy事件处理插件之一,即使是与其选择器匹配的尚未创建的元素。)

或者有更聪明的方法吗?

提前感谢您的帮助,

lara

回答

2

不,这是不可能的。

插入的内容没有DOM元素。事件绑定到DOM元素。

您必须自行添加一个图标作为DOM元素。

2

根据Safari的Web Inspector的css:after不会改变DOM,所以我不认为它有可能检测到JavaScript的点击。