Blazor, There is no tracked object with id 'x'. Perhaps the DotNetObjectReference instance was already disposed

I have an editable form, at first component render, everything is OK, but when I leave the page and return back, it raises "There is no tracked object with id 'x'. Perhaps the DotNetObjectReference instance was already disposed."

OnAfterRenderAsync Method :

 private DotNetObjectReference<Groups> _objRef;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {
        _objRef = DotNetObjectReference.Create(this);
        await JSRuntime.InvokeVoidAsync("JSFun", _objRef);
    }
}

JSInvoke Method :

[JSInvokable]
public void UpdateModel(string Id)
{
    Group = GroupService.Get(new Guid(Id));
    StateHasChanged();
}

Dispose Method :

public void Dispose()
{
     _objRef?.Dispose();
}

Javascript Method : (Here in the second page render the error raises)

$(document).on('click', '.btnEdit', function () {       
    instance.invokeMethodAsync('UpdateModel', Id).then(c => {         
        editModal.modal('show');
    });
});

• Update I solve the problem by changing the event handler from $(document).on('click' to wrapperInstance.on('click' where wrapperInstance is a wrapper to my current component :

  var wrapper = $("#wrapper"); wrapper.removeClass(); wrapper.addClass("wrapper" + instance["_id"]); var wrapperInstance = $(".wrapper" + instance["_id"]);

note that I have added a wrapper to my component like this :

<div id="wrapper">
  component content
</div>