网站首页 > 知识剖析 正文
大家一定遇到过在for循环中创建html元素,并且绑定事件的情况,
实际的效果,发现最后一个元素的事件将会覆盖前面所有元素的事件,如下面的代码:
for (int i = 0; i < 10; i++) {
var p=$("<p></p>");
p.html(i);
var url="http://localhost/p?id="+i;
p.click(function(){
window.open(url);
});
$("body").append(p);
}
以上代码,目测看没有什么问题,但是实际情况是,所有的p元素的click事件都是相同了,最后一次的事件覆盖了前面所有的事件,
url都变成了最后一次的,这应该是jquery的一个bug
那应该如何解决呢?
我稍作调整,改成以下的就可以了
for (int i = 0; i < 10; i++) {
var p=$("<p></p>");
p.html(i);
var url="http://localhost/p?id="+i;
p.attr("url",url);
p.click(function(){
window.open($(this).attr("url"));//此处不能直接写url
});
$("body").append(p);
}
这样,每个p标签的事件都是独立的了。
网上看了听说可以使用数组的方法解决,希望有更优雅的解决方法,希望大家评论区讨论贡献
- 上一篇: Spring中源码中涉及的「设计模式」知多少?
- 下一篇: Web前端开发-CSS中伪类和伪元素
猜你喜欢
- 2024-11-23 Python的selenium实现等待某个元素加载完成后返回结果
- 2024-11-23 DOM 操作之DOM概念和获取元素
- 2024-11-23 html 哪些是块级元素、哪些是行内元素?
- 2024-11-23 前端面试题-CSS-可替换元素和非替换元素
- 2024-11-23 小白总结:前端HTML基础知识点(1)——元素总结
- 2024-11-23 HTML Video 元素在 Vue 中消失的 muted 属性
- 2024-11-23 用CSS 实现元素垂直居中,有哪些好的方案?
- 2024-11-23 JavaScript知识点总结(7)
- 2024-11-23 Java 0基础入门 (Html表单、表单元素)
- 2024-11-23 《css大法》之使用伪元素实现超实用的图标库
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)