jquery e.target.hasClass 不工作

Posted 2023-03-16

【中文标题】jquery e.target.hasClass 不工作

【英文标题】：jquery e.target.hasClass not working

【发布时间】：2012-08-22 17:06:03

【问题描述】：

我动态创建了一个新的div（带有“文本框”类和 ID）以及其中的一些其他元素，稍后在我的代码中我将 div 绑定到点击事件，并显示点击元素，如下所示：

$('#textbox_'+i).bind('click', function(event)
    alert(event.target.className);

这很好，它会给我textbox 作为显示的类之一。 但是event.target.hasClass() 似乎不起作用。因此，当我执行以下操作时，什么也没有发生：

$('#textbox_'+i).bind('click', function(event)
    if(event.target.hasClass('textbox'))  alert('got it!'); 

我尝试了几种不同的方法，但在我看来event.target.hasClass() 只是不起作用。是否有其他方法来处理事件或者我做错了什么？

【参考方案1】：

您正在尝试在标准 DOM 元素上使用 jQuery 方法 hasClass()。您需要将普通的 JS DOM 元素 e.target 转换为 jQuery 对象，如下所示：

$(event.target).hasClass('textbox')

你最终得到：

$('#textbox_'+i).on('click', function(event)
     if( $(event.target).hasClass('textbox')) alert('got it!');
);

注意on() 的使用，click 函数的正确关闭，如果您只执行一个简单的警报，则 if 语句中不需要大括号。

【讨论】：

哇！好吧，这很简单！也许这有点离题，但是 $(event.target) 和 event.target 有什么区别？前者适用于 hasClass，但当我尝试提醒 .className 时不适用。

hasClass 是一个 jQuery 函数，.className 是纯 javascript

第一个是用jQuery包裹的，所以它是一个jQuery对象，可以和jQuery方法一起使用。第二个是在函数event 中返回的纯javascript 对象，可以与纯javascript 方法一起使用，但不能与jQuery 方法一起使用。

我需要停止在 .live 监听器上的传播；所以我使用了上面的提示并得到了if(!$(e.target).hasClass("seeDetails")) return false;，效果很好。谢谢！

很好的解决方案。但是，当文档加载时出现此错误：ReferenceError: event is not defined。有什么想法吗？

【参考方案2】：

如果你想在不使用 jQuery 的情况下保持你的 JS DOM 元素简单......

event.target.classList.contains('textbox')