使用 jQuery / 更改链接文本 ASP.NET 不会立即起作用

Changing a link text with jQuery / ASP.NET not working immediately

本文关键字：NET 起作用 ASP 文本 jQuery 链接 使用      更新时间：2023-09-26

我在使用 jQuery 更改链接文本时的代码 asp.net 遇到了问题。奇怪的是：我必须精确单击四次才能正常工作，之后我的链接会发生变化。谁能告诉我这种奇怪的行为的原因是什么？任何缓存问题？

这是我 asp.net 的代码：

<asp:GridView ID="gvSurveys" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" RowStyle-CssClass="aspBoundField" Width="100%">
    <Columns>
        <asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Lieferant">
            <ItemTemplate>
                <a href="javascript:void(0)" class="linkfield" id="surveyListSupplierLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Lieferant.Name") %></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Fragebogenkatalog">
            <ItemTemplate>
                <a href="javascript:void(0)" class="linkfield" id="surveyListCatalogueLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Fragebogenkatalog.Name") %></a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Status">
            <ItemTemplate>
            <!-- This is where the changes should happen: -->
                <a href="javascript:void(0)" class="linkfield" id="surveyListStatusLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Status_Text") %></a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

这是我的JavaScript/jQuery：

$("#surveyListStatusLink_" + surveyData.Id).html(surveyData.StatusText);

所以基本上我想发生的是，当某个事件被触发时（在这种情况下是点击我的链接），链接标题应该改变。一切正常，我像这样绑定点击事件：

<script type="text/javascript">
    $(document).on("click", ".linkfield", function () {
        numberStart = $(this).attr("id").indexOf("_") + 1;
        SelectedId = $(this).attr("id").substring(numberStart, $(this).attr("id").length);
        LoadData(SelectedId);
        $("#fade").fadeIn(300, "swing", function () { $("#surveyForm").fadeIn(200); });
    })
</script>

包含 jQuery 语句的 LoadData 函数：

function LoadData(id) {
    $.ajax({
        type: "POST",
        url: "SurveyList.aspx/GetData",
        data: '{surveyId: "' + id + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnLoadDataSuccess,
        failure: function (response) {
            alert(response.d);
        }
    });
}
function OnLoadDataSuccess(response) {
    if (response.d.substring(0,5) == "Error")
        alert(response.d);
    else {
        surveyData = jQuery.parseJSON(response.d);
        $("#surveyFormTitle").html(surveyData.Supplier.Name); // Note: this shows up properly!
        $("#surveyListStatusLink_" + surveyData.Id).html(surveyData.StatusText);  // This doesn't...
    }
}

当我调试它时，我可以看到html值被正确更改，但问题来了：它不会显示在浏览器中。它没有显示任何变化，我不太确定我做错了什么。

我已经尝试过的事情：

  • 在标题上使用 .attrib（）-函数

  • 在链接上使用 .fadeOut（） 函数

  • 在链接元素上使用 .text（）-函数

。但仍然：没有明显的变化。

那么谁能说出问题是什么以及我如何解决它？

提前感谢！

我知道

这不是一个很好的答案，但是看着代码，我想不出它成为一个问题的一个很好的理由。我唯一能想到的就是把它弄傻很多。首先，将每个定位标记的 onclick 事件处理程序更改为

onclick="HandleClick(this, '<%#Eval("id")%>');">

然后用这个替换你的javascript 函数 HandleClick （link， selectedId） {

    document.getElementById('surveyList').style.display='none' //Just moved this in to the method
    LoadData(link, selectedId); //Load the data with the id and link you provided
    $("#fade").fadeIn(300, "swing", function () { $("#surveyForm").fadeIn(200); });
})

然后将链接传递给 Load 方法和成功方法，以便可以直接使用它，而不是查询它

function LoadData(link, id) {
$.ajax({
    type: "POST",
    url: "SurveyList.aspx/GetData",
    data: '{surveyId: "' + id + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response){ 
          OnLoadDataSuccess(response, link); //Still calling OnLoadDataSuccess, but changed it so we can easily provide input parameters
    },
    failure: function (response) {
        alert(response.d);
    }
  });
}
function OnLoadDataSuccess(response, link) {
    if (response.d.substring(0,5) == "Error")
         alert(response.d);
    else {
        surveyData = jQuery.parseJSON(response.d);
       $("#surveyFormTitle").html(surveyData.Supplier.Name); // Note: this shows up properly!
       link.innerHTML = surveyData.StatusText; //Use simple javascript to change the information.
    } 
}

当您复制和粘贴时，它可能无法正常工作，因为我还没有真正测试过它，但这个想法是您传入链接和 ID，而不必使用 javascript 解析它们。然后将它们传递给每个方法，以便可以直接引用它们。这应该可以消除jquery的问题，并直接进入javascript。

请注意，我绝不声称知道问题是什么，但认为如果它不那么复杂，至少会更容易调试。

祝你好运！

我刚刚发现阅读这篇文章的问题是什么：如何让 jQuery 选择带有 .（句号）在他们的身份证上？

长话短说：jQuery需要一个反斜杠作为任何特殊字符的转义序列。下划线也算作特殊字符。

所以，这是解决方案：

$("#surveyListStatusLink''_" + surveyData.Id).text(surveyData.StatusText);
相关文章：