Click event not working in Blazor while using JQuery Datatable - asp.net-core

Question

I have initialized Datatable in OnAfterRenderAsync and it's working fine
but onclick event doesn't work.
Grid.razor
<tbody>
#foreach (RecommendedActivityCreateViewModel model in activityList)
{
<tr>
<td><img src="#model.image_url" width="100" /></td>
<td>#model.title</td>
<td>#model.description</td>
<td>#model.created_at.ToString("dd-MMM-yyyy")</td>
<td nowrap="nowrap">
<button #onclick="(()=>EditData(model.Id))" data-toggle="modal" data-target="#AddEditEmpModal" class="btn btn-sm btn-clean btn-icon" title="Edit details">
<i class="la la-edit"></i>
</button>
<a class="btn btn-sm btn-clean btn-icon delete-link" data-url="api/RecommendedActivity/" data-id="#model.Id" title="Delete">
<i class="la la-trash"></i>
</a>
</td>
</tr>
}
</tbody>
GridModel.cs
public class GridModel : ComponentBase
{
[Inject]
protected HttpClient Http { get; set; }
protected async Task EditData(string id)
{
await Http.GetAsync($"api/RecommendedActivity/{id}");
}
}

Answer 1

While you say "I have initialized Datatable in OnAfterRenderAsync" the example below does that and if you copy, paste and run it you'll find nothing gets rendered. You've fetched the data after you've rendered the page. Get the data in OnInitializedAsync and it works.
You also say "and it's working fine but onclick event doesn't work." The EditData method should be in Grid.razor not GridModel which is where it appears to be in the code snippets provided.
The code below shows a simple working example (with GetData in OnInitializedAsync).
#page "/Test"
#foreach (var country in Countries)
{
<div>#country.Country <button class="btn-btn-dark" #onclick="() => OnClick(country.Id)">Edit</button></div>
}
#code {
class Model
{
public int Id { get; set; }
public string Country { get; set; }
}
private List<Model> Countries = new List<Model>();
protected Task OnClick(int id)
{
var x = id;
return Task.CompletedTask;
}
protected override Task OnInitializedAsync()
{
// GetData();
return base.OnInitializedAsync();
}
protected override Task OnAfterRenderAsync(bool firstRender)
{
GetData();
return base.OnAfterRenderAsync(firstRender);
}
protected void GetData()
{
Countries = new List<Model>()
{
new Model(){ Id=1, Country = "UK"},
new Model(){ Id=2, Country = "Spain"},
new Model(){ Id=3, Country = "Portugal"}
};
}
}