- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目前我所做的是检查页面中是否存在元素,但因此我的代码有很多 if 条件。当元素不存在时,Jquery 事件监听器不会显示错误。 jQuery 如何处理这个问题以及我可以使用哪些技术来实现更好的设计?
var el = document.getElementById('el');
var another_el = document.getElementById('another_el');
if(another_el){
el.addEventListener('click', swapper, false);
}
if(el){
el.addEventListener('click', swapper, false);
}
....
...
最佳答案
How jquery handles that...?
jQuery 的 API 是基于集合的,而不是基于元素的。 DOM 的 API 是基于元素的。当您在 jQuery 中执行 $("#foo").on("click", ...)
时,如果没有带有 id
的元素 "foo “
,$()
返回一个空集,而不是 null
,并对其调用 on
set 不执行任何操作,但也不会导致错误。
由于 getElementById
返回 element 或 null
,因此您必须进行已显示的检查,以防止尝试调用 null
,这会导致错误。
如果您想在不使用 jQuery 的情况下享受基于集合的 API 的好处,您可以编写自己的一组实用函数,使用 querySelectorAll
为自己提供一个精简集合如果您愿意的话,基于 DOM API 的包装器。
这是一个非常简单的入门示例:
// The object we use as the prototype of objects returned by `domSet`
var domSetMethods = {
on: function(eventName, handler) {
// Loop through the elements in this set, adding the handler
this.elements.forEach(function(element) {
element.addEventListener(eventName, handler);
});
// To support chaining, return `this`
return this;
}
};
// Get a "DOM set" for the given selector
function domSet(selector) {
// Create the set, usign `domSetMethods` as its prototype
var set = Object.create(domSetMethods);
// Add the elements
set.elements = Array.prototype.slice.call(document.querySelectorAll(selector));
// Return it
return set;
}
domSet("#foo").on("click", function() {
console.log("foo clicked");
});
// Notice that even though there's no id="bar" element, we don't get an error
domSet("#bar").on("click", function() {
console.log("bar clicked");
});
<div id="foo">foo element (there is no bar element)</div>
您可以向 domSetMethods
添加执行其他操作的方法。为了支持 jQuery 提供的 API 的链接样式,在大多数情况下,您可以从这些方法返回 this
。
关于javascript - 处理 "Cannot read property ' addEventListener' of null"错误的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50602547/
我有一个阅读器,其中包含有关 51*51 网格的信息,其中网格上的每个点都由 f32 表示。 .我想将这些数据读入一个向量,以便我可以轻松处理它: pub fn from_reader(reader:
我重新启动了 SQL Server 2005 并运行了统计 IO 的查询。 我得到了这些结果:表“xxx”。扫描计数 1,逻辑读取 789,物理读取 3,预读读取 794,... 预读读取数是读取并放
在 CLHS 中,我为 :read-only x 读到:“当 x 为真时,这指定不能更改此插槽;它将始终包含构造时提供的值。” 我可以做到这一点(CCL、SBCL): CL-USER> (defstr
让我们考虑一下这句话(Total Store Ordering): reads are ordered before reads, writes before writes, and reads be
我正在开发一个 SMTP 库,它使用缓冲读取器通过网络读取行。 我想要一种安全的方式来从网络读取数据,而不依赖于 Rust 内部机制来确保代码按预期工作。具体来说,我想知道 Read trait 是否
我不清楚所有这些读取字符串函数之间的关系。嗯,很明显clojure.core/read-string可以读取 pr[n] 输出的任何序列化字符串甚至 print-dup .也很清楚clojure.ed
所以我做了这个功能,就像倒计时一样。我想在倒计时减少时读取命令。我的大问题是让 read() 在倒计时减少时等待输入。如您所见,我尝试使用 select() 但在第一个 printf 之后("time
这是我vue3+echart5 遇到的报错:Cannot read properties of undefined (reading ‘type‘) 这个问题需要搞清楚两个关键方法: toRaw: 作
下图中,左边是C代码,右边是未优化的LLVM IR形式。 The Figure 在 IR 上运行 MemoryDependenceAnalysis 可查找内存依赖性。原始代码及其 IR 等效代码中
这个问题在这里已经有了答案: Read values into a shell variable from a pipe (17 个答案) 关闭 3 年前。 我一直在尝试像这样从程序输出中读取环境变
当我输入相同的整数时,如何将整数转换为与使用 read(0,buff,nbytes) 获得的缓冲区相同的值/编码字符?我正在尝试编写类似 read() 的东西,但用整数数据代替读取到缓冲区的文件描述符
This question already has answers here: Closed 2 years ago. Read input in bash inside a while loop (
我正在尝试处理来自 MySQL 数据库的一些数据(主要是 double 值)。我收到此错误消息: Invalid attempt to access a field before calling Re
我正在制作一个简单的 TCP/IP 套接字应用 这样做有什么不同: DataInputStream in = new DataInputStream(clientSocket.getInputStre
我操作API服务器。 手机APP访问API服务器时,有时会出现该异常。 我尝试在测试服务器上进行测试,但无法重现。(我改变了apache和tomcat的连接时间。) 有什么问题?? 我该如何解决这个问
我在段落末尾使用“阅读更多”只是为了提醒像P.T.O一样的用户 为什么会有问题? 最佳答案 您必须明白,许多屏幕阅读器用户不会等到整个页面都读给他们听。他们使用键盘快捷键在页面中导航。 JAWS(可以
我已将我的 Angular 应用程序从 12 版本升级到 13 版本。我在单元测试运行期间开始遇到此错误。 Chrome Headless 94.0.4606.61 (Windows 10) AppC
我正在尝试为以下组件编写一个。我正在使用 queryParams 然后使用 switchmap 来调用服务。这是 url 的样子: http://localhost:4200/test-fee/det
我的代码有什么问题? Uncaught TypeError: Cannot read properties of undefined (reading 'remove') 和 Uncaught Typ
我在我的 React 应用程序中遇到了这个问题。 类型错误:无法读取未定义的属性(读取“requestContent”) 我在我的应用程序中使用 commercejs。代码指向 isEmpty=!ca
我是一名优秀的程序员,十分优秀!