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

Question

我正在尝试从append函数创建的元素中调用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");
});

Answer 2

您应该阅读有关jquery事件委派的信息。基本上，当DOM加载时不存在的元素不会被jquery视为，所以如果内存服务于你正在寻找的是

$( "#t_body" ).on( "click", "#btn_Delete", function() {
  // Do Something
});

Answer 3

首先使用不推荐的多重dom元素的id

将名称ID插入id="btn_Delete"+(Order_Result.ORDER_ID) 比如btn_Delete1,btn_delete2...

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

仅适用于已加载的元素。

在加载元素或

之后绑定click事件

而不是做.click（）绑定

在html中追加自己时，添加此onclick=deleteFn($(this)) or onclick="deleteFn('(Order_Result.ORDER_ID)')"

点击它将调用`

的删除图标

function deleteFn(element){
var orderid=$(element).val();
..... your logic to delete the order
}

或

function deleteFn(orderid){
     ..... your logic to delete the order
    }

`

分别