How to call jQuery click function from dynamically appended elements?

Question

I am trying to call a jquery button click function from an element created by the append function, but it is not working below is my source code

 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>",

for the above id btn_Delete i have created the function as follow

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

but when I click nothing is happening I have checked the console there is no error and even the appended table date with has been created properly.

what is the problem and why it is not working? please provide me a Solution Thanks in advance

Junius L · Accepted Answer · 2017-12-23T11:53:40.847

$('#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>

Use it like

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

score 0 · Answer 2 · answered Dec 23 '17 at 11:47

You should read about jquery event delegation. Basically, elements that were not present when the DOM loaded wont be regarded by jquery so if memory serves what you are looking for is

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

srihari92 · Answer 3 · 2017-12-23T11:54:31.500

first of all using a id for mulitple dom element not recommended

insert name id as id="btn_Delete"+(Order_Result.ORDER_ID) like btn_Delete1,btn_delete2...

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

will work only for already loaded elements.

bind the click event after elements loaded or

instead of doing .click() binding

while appending itself in html, add this onclick=deleteFn($(this)) or onclick="deleteFn('(Order_Result.ORDER_ID)')"

onclick of the delete icon it will call `

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

or

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

`

respectively.

How to call jQuery click function from dynamically appended elements?

3 Answers3