How to find button created by Ajax outside Ajax - php

Question

I am creating table rows with delete button in it, but the problem is I am not able to find that delete button outside Ajax. So I use Ajax inside Ajax logic but I have to do it again and again. I want to use the button created by Ajax to call separate Ajax call.
My script is:
$.ajax({
url : "{{url('addtocart')}}",
type : "POST",
data : {_token: CSRF_TOKEN, username:username, userType:userType,
table_no:table_no, order_no:order_no, cname:cname,
tname:tname, dname:dname, dish_qty:dish_qty,
chefnote:chefnote
},
success : function(data){
//console.log(data);
$('#cartOrder').empty();
for(var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
function drawRow(rowData) {
var row = $("<tr />")
row.empty();
$("#cartOrder").append(row);
row.append($("<td contenteditable='true' onBlur='saveToDb(this, "+rowData.dish+")'>" + rowData.dish + "</td>"));
row.append($("<td contenteditable='true' id='xyz'>" + rowData.dish_qty + "</td>"));
row.append($("<td contenteditable='true'>" + rowData.chefnote + "</td>"));
row.append($("<td>"+"<button class='btn btn-primary' value='"+rowData.ord_id+"'>" +"Edit"+"</button>"+" | " +"<button class='btn btn-primary' id='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>" + "</td>"));
}
//delete cart order
$('tBody #deletecart').click(function(e){
e.preventDefault();
$.get("{{url('deletecart')}}",{id:$(this).val()},function(data){
// console.log(data);
$.ajax({
url : "{{url('getcart')}}",
type : 'GET',
data : {table_no:table_no},
success : function(data){
console.log(data);
$('#cartOrder').empty();
for(var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
function drawRow(rowData) {
var row = $("<tr />")
row.empty();
$("#cartOrder").append(row);
row.append($("<td contenteditable='true'>" + rowData.dish + "</td>"));
row.append($("<td contenteditable='true'>" + rowData.dish_qty + "</td>"));
row.append($("<td contenteditable='true'>" + rowData.chefnote + "</td>"));
row.append($("<td>"+"<button class='btn btn-primary' value='"+rowData.ord_id+"'>" +"Edit"+"</button>"+" | " +"<button class='btn btn-primary' id='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>" + "</td>"));
}
}
});
});
});
}
});
});
As you can see, first time I use Ajax to load data into table. But when I click delete, the row gets deleted from database but not from the view. So I load that table data on delete button in second Ajax. But it is not working the second time I click the delete button. It is may be because I am calling parent delete function. How can I do this?

Answer 1

The problem is with ID. You can not use same id at multiple places in same page. In your case, you need to use class instead of id.
Replace this :
<button class='btn btn-primary' id='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>
with ?
<button class='btn btn-primary' class='deletecart' value='"+rowData.ord_id+"'>" +"Delete"+"</button>
As you are creating this html in loop so id is repeating. So use class and override your delete function :
$('tBody .deletecart').click(function(e){