Question

I currently am working with the following tag which is rendered as a button with only an icon on it.
I would like this to be the icon followed by the words Export PDF.

Normally, I would not go about creating the button like this but I am using a Kendo control which produce the button for me. Once rendered the button looks as follows:

<a href="" role="button" class="k-tool k-group-start k-group-end" 
    unselectable="on" title="Export PDF">
    <span unselectable="on" class="k-tool-icon k-pdf"></span>
    <span class="k-tool-text">Export PDF</span>
</a>

I am trying to use JQuery to inject my wanted text into the element as follows:

<script>
        $(document).ready(function () {
            $('.k-tool-icon').text("Export PDF");
        });
</script>

however this does not change anything. I still get the button with only an icon.

Edit: Below is the C# MVC kendo editor that is rendering the above posted html:

@(Html.Kendo().Editor()
      .Name("editor")
      .HtmlAttributes(new { style = "height:900px" })
      .Pdf(pdf => pdf
          .Margin(20, 20, 20, 20)
          .ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
      )
      .Tools(tools => tools
          .Clear()
          .Pdf()
      )
      .Value(@<text>
        <code>
            @Html.Raw(HttpUtility.HtmlDecode(Model.ReportString))
        </code>
    </text>)
    )

Answer 1

如果要替换内容，使用原生DOM会快得多

在上面给出的代码示例中，您在按钮之前和之后都有相同的文本。

Before: <span class="k-tool-text">Export PDF</span>
After: $('.k-tool-icon').text("Export PDF");

// Use Native DOM for better performace
$(document).ready(function () {
    document.querySelector('.k-tool-icon').textContent = `Export PDF`;
});

但无论如何，你在这里展示的代码正在发挥作用。

Answer 2

@peggy，可能你的问题是，在文档准备好之后，kendo进程延迟了很多，而当它尝试添加文本时，kendo生成的元素仍然不存在。

当Kendo已经完成处理时，尝试在某些事件上添加$('.k-tool-icon').text("Export PDF");;

Html更改<a> tag

2 个答案: