MVC中JQuery加载局部视图后下拉框Change事件失效问题

在MVC项目中，通过局部视图GetPayeeList渲染Payee类的下拉框，后端GetPayeeList Action返回对应视图模型。在_PayoutDetails视图中使用@Html.Action加载该下拉框，并设置刷新按钮调用reloadPayee函数，通过jQuery的load方法重新加载下拉框。初始状态下下拉框的change事件可触发AJAX请求至ChangePayoutDetailInput Action，但刷新后该事件不再触发，即使尝试重新绑定事件代码也无效。

原因分析 #

• 直接绑定的局限性：初始代码中使用$(':input').change(...)是将事件直接绑定到页面加载时已存在的DOM元素上。刷新下拉框时，原有的下拉框DOM会被新生成的元素替换，新元素没有继承之前的事件绑定，导致事件失效。
• 异步加载的时序问题：如果尝试重新绑定事件，但绑定逻辑在load方法完成前执行，此时新的DOM元素尚未生成，绑定操作无法作用到目标元素上，导致绑定无效。

解决办法 #

方案1：使用事件委托（推荐） #

将事件绑定到静态父级元素（比如下拉框所在的容器#PayeeListDiv），利用事件冒泡机制，让父级元素监听子元素的事件。即使子元素被替换，新生成的元素触发事件时仍会冒泡到父级，从而触发处理逻辑。

修改后的jQuery事件绑定代码：

// 替换原来的$(':input').change(...)代码
$('#PayeeListDiv').on('change', ':input', 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) {
            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.');
        }
    });
});

方案2：在load回调中重新绑定事件 #

利用load方法的回调函数，在局部视图加载完成后，给新生成的下拉框重新绑定change事件，确保绑定操作在DOM元素生成后执行。

修改后的reloadPayee函数：

function reloadPayee(pid) {
    $('#PayeeListDiv').load('@Url.Action("GetPayeeList", "Home")' + "?pid=" + pid, function() {
        // 局部视图加载完成后，重新绑定change事件
        $('#PayeeId').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) {
                    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.');
                }
            });
        });
    });
};

相关代码参考 #

局部视图GetPayeeList代码 #

@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>

后端GetPayeeList Action代码 #

[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);
}

_PayoutDetails视图相关代码 #

<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>

内容的提问来源于stack exchange，提问作者houman_ag