这是DOM的简化摘录:
<td>
<button value="11" class="expand ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="">
<span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
<span class="ui-button-text"></span>
</button>
</td>
对于表格中的每一行(~500)重复此操作,表格的ID为'eventTable'
这是按钮实例化(jQueryUI):
$('.expand').each(function(){
$(this).button({
text: false,
icons: {
primary: "ui-icon-plus"
}
});
});
这是表#eventTable
上事件委派的一部分$('#eventTable').click(function(e){
if($(e.target).is('.expand'){
// ...
现在,在Firefox 3.6.x,IE7,8中,这可以工作并进入if
语句。但是,在Safari和Chrome中,e.target
代表第一个span
,而不是周围的button
。
为什么会这样?我可以通过它,但我会喜欢一个解释,所以我不会在以后的不同场景中遇到同样的问题。为什么Webkit正确且Trident / Gecko错了?造成差异的原因是什么?
答案 0 :(得分:2)
发表评论作为答案。
如果您只是担心不会在DOM上获得大量click
处理程序引用,我建议您改用.delegate()
。它只将一个处理程序“绑定”到上下文中,并检查事件目标是否与您提供的选择器匹配,如果有,则触发处理程序。
像
这样的东西$('#eventTable').delegate('click', '.expand', function() {
// click on the .expand element/s
});
应该足够了。