динамически созданные кнопки и обработчики событий

Question

У меня есть функция ниже, которая генерирует строки кнопок.

Есть ли способ создания обработчика событий, который использовал бы выбранный идентификатор каждой строки (val.Id)?

Благодаря

  $("#test").on("click", "input.select", function() { 
      alert($(this).closest("tr").data("resultId")); 
     }); 

     $("#btnSearch").click(function() { 
      var searchTerm = $("#tbSearchField").val(); 
      $.getJSON('http://localhost:50151/api/principals/' + searchTerm, function (data) { 
       var html = "" 
       var sel = "" 

       $.each(data, function (key, val) { 
        sel = val.Id 
        html += '<tr data-result-id="' + sel + '">' 
        html += '<td><input class="select" type="button" text="Select" value="Select"></td>' 
        html += '</tr>' 
       }); 
       $(html).appendTo('#test'); 
      }); 
     }); 

Вот что сгенерированный HTML выглядит следующим образом:

<table id="test" border="0" style="border: none; width: 100%; padding: 2px;"> 
<tbody> 
    <tr data-result-id="1999860918"> 
     <td> 
      <input class="select" type="button" value="Select" text="Select"> 
     </td> 
    </tr> 
    <tr data-result-id="1169565143"> 
     <td> 
      <input class="select" type="button" value="Select" text="Select"> 
     </td> 
    </tr> 
    <tr data-result-id="1404344114"> 
     <td> 
      <input class="select" type="button" value="Select" text="Select"> 
     </td> 
    </tr> 
</tbody> 
</table> 

Answer 1

Добавить идентификатор в строку, а затем получить его оттуда.

html += '<tr data-result-id="' + sel + '">' 

затем, выше текущего кода,

$("#test").on("click","td input[type=button]", function(){ 
    alert($(this).closest("tr").data("resultId")); 
}); 

удалить onlick атрибут.

конечный результат:

$("#test").on("click","input.select", function(){ 
    alert($(this).closest("tr").data("resultId")); 
}); 
$("#btnSearch").click(function() { 
    var searchTerm = $("#tbSearchField").val(); 
    $.getJSON('http://localhost:50151/api/principals/' + searchTerm, function (data) { 
     var html = "" 

     $.each(data, function (key, val) { 
      var sel = val.Id; 
      html += '<tr data-result-id="' + sel + '">'; 
      html += '<td><input type="button" class="select" text="Select" value="Select"></td>'; 
      html += '</tr>'; 
     }); 
     $(html).appendTo('#test'); 
    }); 
}); 

Answer 2

попробовать это:

$("#btnSearch").click(function() { 
      var searchTerm = $("#tbSearchField").val(); 
      $.getJSON('http://localhost:50151/api/principals/' + searchTerm, function (data) { 
       var html = "" 
       var sel = "" 

       $.each(data, function (key, val) { 
        sel = val.Id 
        html += '<tr>' 
         html += '<td><input type="button" text="Select" value="Select" data-valId="' + sel +'"></td>' 
        html += '</tr>' 
       }); 
       $(html).appendTo('#test'); 
      }); 
     }); 


$("input[type='button']").on('click',function(){ 
    console.log($(this).data("valId")); 

});