时间戳

首页 > 解决方案 > 添加由 jquery append 方法生成的事件

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

问题描述

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

第一：文件准备好后，我做了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 时，没有弹出警报..

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

标签： jqueryeventsbindingevent-handlingappend

解决方案

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

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

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

推荐阅读