Issue with jquery on load call (MVC)

I have a partial view I call GetPayeeList that simply displays a dropdown list of Payee class. Here's the code for the view:

@model DocuVerse.ViewModels.PayeeDDViewModel
    
@{
    Layout = null;
}
    
<div class="form-floating mb-3 full-width">
    @Html.DropDownListFor(model => model.PayeeId,
                        new SelectList(Model.Payees, "Id", "Name"), "Select Payee", new { @class = "form-control full-width" })
    @Html.LabelFor(model => model.PayeeId, htmlAttributes: new { @class = "control-label" })
    @Html.ValidationMessageFor(model => model.PayeeId, "", new { @class = "text-danger" })
</div>

And here's the Action method's code behind it:

[HttpGet]
public ActionResult GetPayeeList(int pid)
{
    List<Payee> allPayees = _dbContext.Payee.Where(p => p.Name != null && p.Name != "").OrderBy(p => p.Name).ToList();
    
    PayeeDDViewModel viewModel = new PayeeDDViewModel()
    {
        Payees = allPayees,
        PayeeId = pid,
    };
    
    return View(viewModel);
}

Now, I have a view that displays this dropdown and allows for the list to be refreshed using jquery call (since the user can add a payee to the list using a link which would mean the current list is out of date). This view is called _PayoutDetails and here's partial code for the relevant sections:

<div class="form-floating mb-3 col-4 full-width">
    <div id="PayeeRefreshDiv" class="clickable-div">
                    Refresh List <span style="font-size:larger;">↻</span>
    </div>
    <div id="PayeeListDiv" class="row">
         @Html.Action("GetPayeeList", "Home", new { pid = Model.PayeeId })
    </div>
    @Html.ActionLink("Add a Payee", "PayeeDetails", new { id = 0 }, new { target = "_blank" })
</div>

and in the Script section, I have (partially):

$(':input').change(function() {
    var fieldName = $(this).attr('name');
    var fieldValue = $(this).val();
    var payoutId = @Model.Id;

    $.ajax({
        type: 'POST',
        url: '/home/ChangePayoutDetailInput',
        data: {
            input: fieldName,
            value: fieldValue,
            pid: payoutId
        },
        dataType: 'json',
        success: function(data) {
            //alert('success');
            console.log(data);
            var SuccessDiv = $('#successStatusDiv');
            SuccessDiv.show(1000);
            setTimeout(function() {
                SuccessDiv.hide();
            }, 3000);
        },
        error: function() {
            console.log('An error occurred while making the request.');
        }
    });
});

$('#PayeeRefreshDiv').on("click", function() {
    reloadPayee($('#PayeeId').val());
});

function reloadPayee(pid) {
    $('#PayeeListDiv').load('@Url.Action("GetPayeeList", "Home")' + "?pid=" + pid);
};

So when the dropdown selection changes, I call the action method: ChangePayoutDetailInput and send parameters. Everything works well and fine until the user clicks on the refresh link which calls the reloadPayee function in jquery and reloads the dropdown using the previously copied action method. Even though the load works and the dropdown gets populated with the new db entries (if the user added a new payee, etc.) but the $(':input').change(function () { doesnt seem to get triggered again for whatever reason. I even tried cheating and adding the whole block of $(':input').change(function () {... to the reloadPayee function with no success.

Any idea why as soon as the div is refreshed the dropdown's change function stops getting called and how to get it to work?

As you substitute entire #PayeeListDiv content you have to re-add your change listener as you mentioned. But seems you have put it into reloadPayee() function rather than $().load() callback. Please try this

function reloadPayee(pid) {
    $('#PayeeListDiv').load(
        '@Url.Action("GetPayeeList", "Home")' + "?pid=" + pid,
        function( response, status, xhr ) {
             // re-add listener here
             $(':input').change(function () {...});
        }
    );
};

</details>