未为通过动态行生成的按钮生成单击事件

如何解决未为通过动态行生成的按钮生成单击事件

我正在构建一个带有后端的 Django Web 应用程序。我从数据库动态加载 html 页面，并填充这样的动态表，每行中的删除按钮都是预定义的，我需要将特定的单元格值传递给单击事件以进行删除，因此我将其设置为按钮 ID 并通过它通过 onclick 事件，但没有生成事件，也没有产生警报。 我看到了很多例子，但我已经尝试了所有甚至我添加的样式，如果可能的话，我更喜欢使用 <input type="submit" value="Submit"/> 按钮来完成它，但无论如何都不会生成事件。 代码如下：有人可以帮忙吗？

<form name="Dashboard" method="GET" id="AccountForm" action="create">

<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
    $('.btn').on("click",function(event){
        alert("I am clicked!");
        var id = $(this).attr('id');
    });
</script>

<style>
.btn {
  border: solid:black;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

<table id="tbl">
    <tr align="center"><th>Name</th><th>Open</th><th>Test Account</th><th>display Name</th></tr>
    <tr></tr>
    {% for i in form.langs %}
    <tr align="center">
        <td>{{i.name}}</td>
        <td>{{i.open}}</td>
        <td>{{i.testAccount}}</td>
        <td>{{i.displayName}}</td>
        <td><input type="button" name="btnDelete"  value="Delete" class="btn" id={{i.name}}/></td>
    </tr>
    {% endfor %}
  
</table>

</form>

更新： 也可以在没有我现在使用的 .btn 类的情况下使用它吗？ 这个附加组件在下面@freedomn-m 给出的评论中得到了回答