Jquery 由于浏览器之间的目标元素不同,事件委派失败
这是DOM的简化摘录:Jquery 由于浏览器之间的目标元素不同,事件委派失败,jquery,jquery-ui,jquery-ui-button,Jquery,Jquery Ui,Jquery Ui Button,这是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>
<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>
下面是表#eventTable上的活动代表团的一部分
$('#eventTable').click(function(e){
if($(e.target).is('.expand'){
// ...
现在,在Firefox 3.6.x、IE7.8中,这起作用并进入if
语句。然而,在Safari和Chrome中,e.target
代表第一个span
,而不是周围的按钮
为什么会这样?我可以克服它,但我希望有一个解释,这样我就不会在以后的不同场景中遇到同样的问题。为什么Webkit是对的而Trident/Gecko是错的?是什么造成了这种差异?将我的评论作为答案发布
如果您只是不想在DOM上获得大量的单击处理程序引用,我建议您使用.delegate()
。它只将一个处理程序“绑定”到上下文上,并检查事件目标是否与您提供的选择器匹配,如果匹配,则触发处理程序
差不多
$('#eventTable').delegate('click', '.expand', function() {
// click on the .expand element/s
});
应该足够了。我很难相信e.target是第一个跨距,而且检查$(e.target).parent()并不能满足您的需要。这些似乎不相容,你说得对。刚从IDE切换到Vim--测试了一个过时的文件。编辑…为什么不在按钮本身上放置一个点击事件呢?可能不是,但突然capture
和bubble
突然出现在我的脑海中。@DarthJDG,因为我有大约500个按钮。我不想为每一个创建一个点击事件——这是浪费内存。
$('#eventTable').delegate('click', '.expand', function() {
// click on the .expand element/s
});