jquery .html刷新无法在Chrome上运行

Question

我有一个页面,其中包含一个任务列表,每个任务都有一个下拉列表,其中包含可分配任务的团队列表,但由于任务量不足,我无法在Action中预先填充它,因为它会降低分页速度/显示任务非常显着.所以相反,在点击下拉列表时,我有一个jquery函数,它调用一个返回Json字符串的动作.

所有这些在Firefox中都可以正常工作,但在Chrome中,当用户点击下拉列表时,会进行调用,但下拉列表不会填充.用户必须单击并重新打开下拉列表,然后从初始调用中获取数据(没有第二次调用).数据可以很好地添加到HTML中,但下拉列表不会刷新.

$("#teamsSpanFor1354405").click(function () {
    var issueId = 1354405;
    var ddl = $("#teamsSpanFor1354405").find("select.ddlTeamsAssignTask");

    if (ddl.find("option").length == 1) {
        $.ajax({
            url: '/Tracker/Task/DisplayAssignTaskToTeam',
            data: { milestoneId: 1, issueId: issueId, jsonRequest: "true" },
            type: 'POST',
            async: true,
            success: function (data) {
                console.log(data);
                var html = "<option value=''>Assign to Team</option>";
                $.each(data, function () {
                    html += "<option value='" + this.Id + "'>" + this.Name + "</option>";
                });
                console.log(html);
                ddl.html(html);
            }
        });
    }
});

@using (Ajax.BeginForm("AssignTaskToTeam", new AjaxOptions { UpdateTargetId = "assignTaskForIssue" + Model.IssueId, OnSuccess = "ConfirmAssignment(" + Model.Milestone.Id + ")" }))
{
    <input id="MilestoneId" name="MilestoneId" type="hidden" value="1"/>
    <input id="InspectorIssueId" name="InspectorIssueId" type="hidden" value="1354405"/>
    <span id="teamsSpanFor1354405">
            <select id="TeamId" class="ddlTeamsAssignTask" style="width: 125px; " name="TeamId">
                <option value="">Assign to Team</option>
            </select>
        <input class="btnAssign btnClassDisabled" type="submit" value="Assign" disabled="disabled"/>
    </span>
}

Answer 1

您是否尝试过使用.append而不是.html？喜欢：

$.each(data, function() { 
    ddl.append($('<option></option>').val(this.Id).text(this.Name));
});

在我看来，它们的工作原理应该相同，但可能值得尝试改变它，因为.html它们的行为不一样。

或者，如果 Chrome 在任何情况下都拒绝刷新下拉列表，您可以将下拉列表替换为链接，然后在用户单击链接时执行 ajax 调用，并将链接元素替换为新构建的下拉列表，然后打开它。

或者（可能更黑客）您可以构建延迟（setTimeout在 document.ready 期间），以便在页面加载后自动填充下拉列表，无论用户是否单击它，从而避免在选择已经打开后刷新选项。