Question

我有一个表，每个td末尾都有两个SVG，一个用于删除该行，另一个用于编辑该行。

该表正在向连接到数据库并将结果发送回的PHP文件发出ajax请求。

问题是按类触发SVG上的click事件的触发器不起作用，我不确定如何执行，但是如果我在HTML上写一个td，如果该td是由请求编写的，那么它是有效的。工作。

这是在HTML上编写的行中带有简单警报的代码，它可在其他代码上不起作用

 $(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');
  });
});

这是HTML代码：

<!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>&nbsp;</th>
                  <th>&nbsp;</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>

感谢任何反馈，谢谢！

SVG点击事件未触发

0 个答案: