javascript - 如何从动态附加元素调用 jQuery 单击函数？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我试图从由追加函数创建的元素调用 jquery 按钮单击函数，但它在我的源代码下面不起作用

 var tr = $('#t_body').append(
                             "<tr>",
                             "<td><input type='checkbox' id='check' value='" + (Order_Result.ORDER_ID) + "'></td>",
                             "<td><button class='btn btn-outline-secondary' value='" + (Order_Result.ORDER_ID) + "' id='btn_ViewItem'><i class='material-icons'>pageview</i></button></td>",
                             "<td><button class='btn btn-outline-danger' value='" + (Order_Result.ORDER_ID) + "' id='btn_Delete' ><i class='fa fa-trash' aria-hidden='true'></i></button></td>",

对于上面的 id btn_Delete 我创建了如下函数

$("#btn_Delete").click(function(event) {
    alert("same");
});

但是当我单击没有任何反应时，我检查了控制台没有错误，甚至附加的表格日期也已正确创建。

问题是什么以及为什么它不起作用？请给我一个解决方案提前致谢

Answer 1

$('#t_body').append("<tr>",
        "<td><input type='checkbox' id='check' value='" + 23 + "'></td>",
        "<td><button class='btn btn-outline-secondary' value='" + 23 + "' id='btn_ViewItem'><i class='material-icons'>pageview</i></button></td>",
        "<td><button class='btn btn-outline-danger' value='" + 23 + "' id='btn_Delete' ><i class='fa fa-trash' aria-hidden='true'></i></button></td></tr>");
        
$(document).on("click", "#btn_Delete", function(event) {
    alert("same");
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="t_body"></tbody>
</table>

像这样使用

$(document).on("click", "#btn_Delete", function(event) {
    alert("same");
});