This question already has an answer here:
I have a table with two SVG on the end of each td, one is for deleting the row and the other is to edit the row.
The table is being filled with an ajax request to a PHP file that connects to the DB and sends the result back.
The problem is the trigger to the click event on the SVG by class doesn't work and I'm not sure how but if I write a td on the HTML it works if the td is written by the request it doesn't work.
This is the code with a simple alert in the line that is written on the HTML it works on the others it doesn't
$(document).ready(function () {
$("#teste_go").on('click',function(){
var qid = '20191106103001FIL';
console.log(qid);
if (qid){
$.ajax({
type:"POST",
url:'./dados.php',
data:{
queryid:qid
},
success:function(response){
if (response.lnval){
x=response.lnval;
var table = $('<tr>'
+ '<td>' + x.mot_rec + '</td>'
+ '<td>' + x.mot_rec_mac + '</td>'
+ '<td>' + x.docgar + '</td>'
+ '<td>' + x.out_cus_gar + '</td>'
+ '<td>' + x.nrec_forn + '</td>'
+ '<td><svg viewBox="0 0 100 100" class="icon-h-delete" data-id="'+x.id+'"><use xlink:href="#icon-cross"></use></svg></td>'
+ '<td><svg viewBox="0 0 100 100" class="icon-h-edit" data-id="'+x.id+'"><use xlink:href="#icon-pencil"></use></svg></td>'
+ '</tr>'
);
$('#tab_rec').append(table);
}
}
})
}
});
$(".icon-h-delete").on('click',function(){
alert('HELOOOOOOOO');
});
});
Here's the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="./js/jquery341.js"></script>
<script type="text/javascript" src="./js/ts.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<!-- <link rel="stylesheet" type="text/css" href="./css/mine.css"> -->
<?php include_once("./img/symbol-defs.svg"); ?>
</head>
<body>
<div class="body-wrapper">
<div class="form-row">
<div class="form-group col-md-12">
<table id="empTable" class="table" width="100%" cellspacing="0" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>MOTIVO RECLAMAÇÃO MACRO</th>
<th>MOTIVO RECLAMAÇÃO</th>
<th>DOCGAR</th>
<th>OUTROS CUSTOS GARANTIA</th>
<th>Nº RECLAMAÇÃO FORN.</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody id="tab_rec">
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td><svg viewBox="0 0 100 100" class="icon-h-delete" data-id="'+x.id+'"><use xlink:href="#icon-cross"></use></svg></td>'<td><svg viewBox="0 0 100 100" class="icon-h-edit" data-id="'+x.id+'"><use xlink:href="#icon-pencil"></use></svg></td>'</tr>
</tbody>
</table>
<svg viewBox="0 0 100 100" class="icon-h-delete"><use xlink:href="#icon-cross"></use></svg>
</div><!-- fim col -->
</div><!-- fim row -->
<button class="btn btn-outline-success float-right" type="button" id='teste_go'>Gravar</button>
</div>
</body>
</html>
Any feedback is appreciated, thanks!