使用Ajax更改包含链接的标签内部文本

Change label inner text that contains link using Ajax

本文关键字：标签 内部 文本 链接 包含 Ajax 使用      更新时间：2023-09-26

我有一个包含如下链接的标签:

<label id="textlabel" > <a href="#"  id="testlink">data</a> </label>

我试图使用Ajax来改变标签文本，但它不工作。

为了测试的目的，它在这里工作，但它不工作在我的网页(网页是全新的没有任何其他)。

$('#testlink').click(function(){
    $('#testlabel').text("new data");
});
JavaScript: 

function myfunc(clicked_id) {
            var label = document.getElementById(clicked_id).parentElement;
            var params = "{'orderid':'" + clicked_id + "'}";
            var fd = new FormData();
            fd.append("orderid", params);
            alert("test");
            $("'#" + clicked_id + "'").click(function () {
                $.ajax
                       ({
                           url: 'Handler.ashx',
                           data: fd,
                           processData: false,
                           contentType: false,
                           type: 'POST',
                           success: function (result) {
                               $("'#"+label.id+"'").text(result);
                               }
                       })
            });
        }
更新:

  1. 下面的ajax一般工作

     <script type="text/javascript">
function myfunc(clicked_id) {
    var params = "{'orderid':'" + clicked_id + "'}";
    var label = document.getElementById(clicked_id).parentElement;
    $("#"+label.id).click(function () {
        $.ajax({
            type: "POST",
            url: "Handler.ashx",
            data: clicked_id,
            success: function (result) {
                $("#" + label.id).text(result);
                      }          
        }); });
}

  2. 我花了很多时间来查明问题，现在我认为问题是在自动生成元素中发现的。例如

    <table>
<tr><td><label id="lbl" style="background-color:yellow">
<a href="#" onclick="myfunc(this.id)" id="00000">Label</a>
</label></td></tr>
@for(int i=0;i<4;i++)
{
 <tr><td>
<label id="lbl+@i" style="background-color:yellow">
<a href="#" onclick="myfunc(this.id)" id="@i">Label</a>
 </label></td></tr>
}
</table>

ajax只改变第一个标签的文本，但不改变其他自动生成的链接和标签。当点击自动生成的链接

时，下面的部分不会运行
            $("#"+label.id).click(function () {
            $.ajax({
                type: "POST",
                url: "Handler.ashx",
                data: clicked_id,
                success: function (result) {
                    $("#" + label.id).text(result);
                          }          
            }); });
更新:

最后我发现哪里出了问题。它是我使用的标签id。他们都有"+"后更改为"_"，我的应用程序现在工作良好。

感谢所有帮助过我的人

问题代码更改后的更新

有一个小故障
success: function (result) {
    $("'#"+label.id+"'").text(result) 
}
应该

success: function (result) {
    $("#"+label.id).text(result) 
}

另外，为了测试标签对象是否存在，您可以添加

success: function (result) {
    console.log(label); // DON'T FORGET TO REMOVE THIS LINE LATER BEFORE DEPLOYING
    $("#"+label.id).text(result) 
}

也许是因为在你的测试函数中，你把拼错了标签的id textlabel作为testlabel 

$('#testlink').click(function(){
    $('#testlabel').text("new data");
});

?

那么在实际代码中:

success: function (result) {
    $('#label.id).text(result);
}

#label.id is

  1. 不是正确的jQuery选择器。应该是'#textlabel'
  2. 缺少关闭'

嘿，如果你想更新所有包含链接的标签文本，请尝试这个代码我也更新了你的演示链接，请参考

$('[id*="test"]').text("ddaadfa");

看到演示

如果你使用ajax，那么你必须在success块中使用这段代码来更改链接

的文本
success: function (result) {
    $('[id*="test"]').text("ddaadfa");
}
相关文章：