前不久用js写评论的时候遇到的问题,当时就觉得很奇怪,自己写的代码没有报错,编译正常
浏览器控制台调试,点击了Click也不反应,上网查询了很久也不见得有人提起过(可能是我不会搜索吧),多次搜索引擎查阅后无果,我只好求助同校学前端的朋友

正文

问题

1
2
3
4
5
6
7
8
9
10
11
12
13
<button>点击追加div标签</button>
<div id="zhuijia"></div>

// 点击button后再zhuijia里面追加标签
$('button').click(function () {
$('#zhuijia').prepend('<div id="test">JQuery追加的标签</div>');
})

// 点击js追加的标签不反应
$('#test').click(function () {
alert(1);
})

解决

on() 和 click() 的区别:
二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

1
2
3
4
5
6
7
8
9
10
11
12
<button>点击追加div标签</button>
<div id="zhuijia"></div>


$('button').click(function () {
$('#zhuijia').prepend('<div id="test">JQuery追加的标签</div>');
})

// 使用这种方法即可成功触发click
$(document).on('click', '#test', function () {
alert(1);
})
文章作者: Lete乐特
文章链接: https://blog.lete114.top/article/a337c870.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特's Blog
  • alipay
  • wechat

评论