同一把手脚本中的不同事件

Question

我有下一个疑问/问题。我需要使用由Handlebars脚本加载的一些ID。 一旦获得值，即表格，只要按一下按钮，我就能够执行另一个ajax调用

代码如下：

HTML：

div class="container">
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Nombre</th>
                <th scope="col">Valor</th>
                <th scope="col">Tipo</th>
                <th scope="col">Cron</th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody class= "tbody">
            <script id="properties-template" type="text/x-handlebars-template">
                {{#each properties}}
                <tr>
                    <th>{{clave}}</th>
                    <td>{{valor}}</td>
                    <td>{{variable}}</td>
                    <td>{{cron}}</td>
                    <td><button class="btn"><i class="fa fa-pencil"></i></button></td>
                    <td><button class="btn"><i class="fa fa-trash"  id="{{id}}" style="color:red"></i></button></td>
                </tr>
                {{/each}}
            </script>
        </tbody>
    </table>
</div>

JS：

$(document).ready(function(){
$.ajax({
       url: URL_address,
    success: function(data){
      var source = $("#properties-template").html();
      var template = Handlebars.compile(source);
      $('.tbody').append(template(data));
    },
    error: function(data) {
      console.log('error', data);
    }
  })   
});

我已经尝试实现我需要做的$（“。fa-trash”）。click（..），但未定义。我该怎么办？