提问者:小点点

添加由jquery append方法生成的事件


我有一个关于附加事件问题。

首先:在文档准备好之后,我进行了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时,不会弹出警报。

有没有人能解释为什么这不起作用?


共1个答案

匿名用户

是的-合乎逻辑。 您正在将事件绑定到一个尚不存在的元素。 它没有未来意识; 它不会将自己附加到将来出现的与选择器匹配的任何元素。

相反,委托事件。 对于事件来说,这通常是很好的实践,但涉及单个元素或绑定事件时确定存在的元素的简单情况除外。

$('body').on('click', '.test', example);
function example() {
    alert('success');
}