gpt4 book ai didi

jquery - 由于浏览器之间的目标元素存在差异,事件委托(delegate)失败

转载 作者:行者123 更新时间:2023-12-01 04:26:34 25 4
gpt4 key购买 nike

这是 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 上事件委托(delegate)的一部分

$('#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 上获得大量 click 处理程序引用,我建议您改用 .delegate() 。它仅将一个处理程序“绑定(bind)”到上下文,并检查事件目标是否与您提供的选择器匹配,如果匹配则触发处理程序。

类似

$('#eventTable').delegate('click', '.expand', function() {
// click on the .expand element/s
});

应该足够了。

关于jquery - 由于浏览器之间的目标元素存在差异,事件委托(delegate)失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6064493/

25 4 0
文章推荐: Jquery:根据
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com