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

【问题标题】：add event which is geneerated by jquery append method添加由 jquery append 方法生成的事件
【发布时间】：2020-06-25 11:21:36
【问题描述】：

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

首先：文件准备好后，我做了ajax并成功

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

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

【问题讨论】：

标签： jquery events binding event-handling append

【解决方案1】：

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

取而代之的是delegate the event。对于事件而言，这通常是一种很好的做法，除了涉及单个元素或您在绑定事件时确定存在的元素的简单情况。

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

【讨论】：