Проблема в Button Click bind на Dom Ready

Question

Я готовлю таблицу Html на Dom и пытаюсь нажать кнопку в определенной строке. Ниже мой код.

$.ajax({ 
    url:   Url + token, 
    method:   "POST", 
    async:   true, 
    data:   JSON.stringify(data), 
    contentType: "application/json; charset=utf-8", 
    success: function (Result) { 
     var editButton = '<input type="button" class="EditRole" value="Edit">'; 
     $.each(Roles, function(key, Role) { 
      var Action = PrepareTd(editButton); 
      var tr = '<tr attr-id="' + Role.RoleID + '">' + Action + "</tr>"; 
      tbody.append(tr);   
     }); 
    }, 
    error: function (jqXHR) { 
     ErrorCallback(jqXHR); 
    } 
}); 

$(document).ready(function() { 
    $('.EditRole').on("click", function() { 
     debugger; 
     console.log($(this).parent()); 
    }); 
}); 

Это никогда не удаляло отладчик. Я что-то упускаю?

Answer 1

Это вопрос события делегации Используйте этот

$(document).ready(function() { 
    $(document).on("click", '.EditRole', function() { 
     console.log($(this).parent()); 
    }); 
});