jquery append 动态添加的元素事件on 不起作用的解决方案
Posted lucky
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery append 动态添加的元素事件on 不起作用的解决方案相关的知识,希望对你有一定的参考价值。
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。
具体不多说了,请看下面的代码吧。
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>测试</title>
<script type=
"text/javascript"
src=
"../resources/js/jquery-1.11.1.min.js"
></script>
<script type=
"text/javascript"
>
$(
function
(){
//动态添加
$(
".add"
).on(
"click"
,
function
(){
console.log(
"进来了"
);
$(
".info"
).append(
‘<div class="delete"><h3>单击我来删除我</h3></div>‘
);
});
//对动态添加的元素添加事件-删除
$(
".info"
).on(
"click"
,
".delete"
,
function
(){
console.log(
"进来了Delete!"
);
$(
this
).remove();
}); //关键代码
});
</script>
</head>
<body>
<h2 class=
‘add‘
>单击我添加动态元素</h2>
<div class=
"info"
></div>
</body>
</html>
以上是关于jquery append 动态添加的元素事件on 不起作用的解决方案的主要内容,如果未能解决你的问题,请参考以下文章
jquery动态生成dom(比如append)导致js事件无效
JQuery获取append后的动态元素:live()和on()
我使用jquery中的append方法,动态添加新的元素内容,新添加的元素上的onlick事件不起作用。
处理jQuery append加入的元素 绑定事件无效的方法