将文本加载到 div 后，jQuery .toggle() 不起作用答案

【问题标题】：jQuery .toggle() does not work after text loaded into div将文本加载到 div 后，jQuery .toggle() 不起作用
【发布时间】：2013-05-01 04:26:30
【问题描述】：

在我的 ASP MVC 3 页面中，我尝试使用 jQuery .toggle() 根据用户是否单击 checkbox 来隐藏和显示文本框。当页面加载时，文本框被隐藏。大多数情况下，用户会将值放入几个单独的文本框中，Ajax 调用会将值放入该div 元素的.text() 属性中。当用户单击复选框时，我希望 div 中的任何值消失，并显示文本框。

现在，我可以让div 文本出现/重新出现就好了。但是，textbox 只有在之前没有进行 ajax 调用时才会出现。

这是来自 Ajax 调用的代码。

function getDrmTerritory(zipCode, stateCode, channelName) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("getTerritory","AgentTransmission")',
        data: { zipCode: zipCode, stateCode: stateCode, channelName: channelName },
        success: function (data) {
            if (data == "") {
                alert("No Territory Code for " + channelName + " located in " + stateCode + ", " + zipCode);
                $('#territoryName').text("");
                $('#Region').val("");
            } else {
                $('#Region').val(data);
                $('#territoryName').text(data);
                alert("Territory set to " + data);
                window.global = data;
            }
        },
        error: function (data) {
            alert("Territory did not get set, please review State/Zip/Market Segment");
        }
    });
}

这里是div。上面的 Ajax 调用应该只是在 div 中放置一些文本，而不是 textbox 本身，因为此时它是隐藏的。

    <div class="M-editor-label">
        @Html.LabelFor(model => model.Region)
    </div>
    <div class="M-editor-field" id="territoryName">
        @Html.TextBoxFor(model => model.Region, new { style = "display: none;" })
        @Html.ValidationMessageFor(model => model.Region)
    </div>

通过点击此div中的checkbox

    <div class="M-editor-label">
        Override Territory Manually?
    </div>
    <div class="M-display-field" style="padding-right:190px;padding-top:10px;">
        @Html.CheckBoxFor(Model => Model.OverrideRegionInd)
    </div>

这个.click 函数被调用（这个函数在document.ready 函数里面）。此单击功能使#Region TextBoxFor<> 控件重新出现。然而，就像我之前所说的，这只有在没有进行getDrmTerritory Ajax 调用的情况下才有效。

    $('#OverrideRegionInd').click(function () {
        var region = $.trim($('#territoryName').text());
        if (region != "") {
            $('#territoryName').text("")
        } else {
            $('#territoryName').text(window.global);
        }
        $('#Region').toggle();
    });

编辑

这个.ajaxComplete 调用也应该被提及，因为它每次都在GetChannel() 方法之后被调用。似乎$('#territoryName').text(""); 行正在将文本框从页面上吹走，但是我不知道如何使div 元素中的文本消失并同时保留TextBoxFor<> 控件。

$(document).ajaxComplete(function (event, xhr, settings) {
    if (settings.url == "/AgentTransmission/GetChannel") {
        var channel = $.trim($('#channelName').text());
        if ($('#AlignmentM:radio').is(':checked')) {
            if ($('#MailingZip').val() != "" && $('#MailingState').val() != "" && channel != "") {
                getDrmTerritory($('#MailingZip').val(), $('#MailingState').val(), channel);
            } else if (channel != "") {
                $('#territoryName').text("");
                $('#Region').val("");
            }
        }
        else if ($('#AlignmentL:radio').is(':checked')) {
            if ($('#LocationZip').val() != "" && $('#LocationState').val() != "" && channel != "") {
                getDrmTerritory($('#LocationZip').val(), $('#LocationState').val(), channel);
            } else if (channel != "") {
                $('#territoryName').text("");
                $('#Region').val("");
            }
        }
    }
});

【问题讨论】：

标签： c# jquery asp.net-mvc asp.net-mvc-3 razor

【解决方案1】：

您不应该设置div 的文本，您需要在span 上设置文本。否则，div 的内容将在此之后被删除：

$("#territoryName").text("");

改为替换它们以进行验证span：

$("#territoryName span").text("");

和

$('#territoryName span').text(data);

【讨论】：