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

Question

我对附加事件有疑问。

首先：文档准备好后，我制作了ajax并成功

其次：ajax成功后，我将一些代码附加到正文标签

第三个：我想附加在第二个创建的事件。

下面是我的代码

<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 时，没有弹出警报..

有没有人可以解释为什么这不起作用？

Answer 1

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

相反，delegate the event。对于事件来说，这通常是一种很好的做法，但在涉及单个元素或您确定在绑定事件时确实存在的元素的简单情况除外。

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

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

add event which is geneerated by jquery append method

jquery

events

binding

append

event-handling