我有一个关于附加事件问题。
首先:在文档准备好之后,我进行了ajax和success
第二:在ajax成功之后,我在body标记后面附加了一些代码
第三:我想附加第二个创建的事件。
下面是我的代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--jquery, cookie import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$.ajax({
url: '/phone',
type:'post',
success:function(){
$('body').append('<div class="test">hi</div>')
}
})
})
$('.test').on('click',example)
function example(){
alert('success');
}
</script>
</body>
</html>
运行后,当我单击div时,不会弹出警报。
有没有人能解释为什么这不起作用?
是的-合乎逻辑。 您正在将事件绑定到一个尚不存在的元素。 它没有未来意识; 它不会将自己附加到将来出现的与选择器匹配的任何元素。
相反,委托事件。 对于事件来说,这通常是很好的实践,但涉及单个元素或绑定事件时确定存在的元素的简单情况除外。
$('body').on('click', '.test', example);
function example() {
alert('success');
}