jquery - 在 jquery 中添加 span 标签不显示

Question

我正在尝试通过单击更改 <asp:linkbutton 中的文本.该代码似乎在 IE 和 Firefox 中运行良好，但在 Chrome 中不起作用。

这是我正在使用的代码

 $('<span></span>', {
    text: icon,
    class: 'WebFonts'
}).appendTo('#' + btn);

btn 是通过 onclientclick 函数传入的参数。就像我说的，这在 IE 和 Firefox 中有效。这是 webfont css 类，当我不尝试在 javascript 中附加它时，chrome 将呈现它。

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('/font/fonts/websymbols/websymbols-regular-webfont.eot');
    src: url('/font/fonts/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/fonts/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('/font/fonts/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('/font/fonts/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.WebFonts {font-family:WebSymbolsRegular}

非常感谢一些帮助谢谢香农

~~~~~~~~~~~~~这是您的要求

function checkDisableButton(btn, parmText, icon) {
var mbtn=$('#' + btn)
mbtn.attr('disabled', '');
mbtn.addClass("buttonPad buttonProcessing button");
mbtn.text(parmText + "   |   ")
$('<span></span>', {
    text: icon,
    class: 'WebFonts'
}).appendTo('#' + btn);

这是它的名字

 <asp:LinkButton ID="lbSave" runat="server" CssClass="ButtonPrimary button" Text="Save"
    OnClientClick="checkDisableButton(this.id, 'PROCESSING', 'V');" />

这是单击 asp:linkbutton 时在 Chrome 中显示的 ID

<a onclick="checkDisableButton(this.id, 'PROCESSING', 'V');" id="ctl00_ContentPlaceHolder1_lbSave" class="ButtonPrimary button buttonPad buttonProcessing" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lbSave','')" disabled="disabled">PROCESSING   |   <span class="WebFonts">V</span></a>

你会注意到代码中有 span class="WebFonts"

这是点击前的代码

<a onclick="checkDisableButton(this.id, 'PROCESSING', 'V');" id="ctl00_ContentPlaceHolder1_lbSave" class="ButtonPrimary button" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lbSave','')">Save</a>

所以看起来 span 标签被放入了..它只是没有显示......您还需要哪些其他信息来帮助解决问题？

~~~~~~~~~这里有更多信息..如果我使用它而不是 jquery...webfonts 显示

  document.getElementById(btn).innerHTML = parmText + '<span class=buttonPad>|</span><span class=WebFonts>' + icon + '</span>';
    document.getElementById(btn).className = 'buttonProcessing button ';

只是更多信息.. 不确定我得到了什么

Answer 1

我认为这里的关键词是:

Here is the webfont css class and chrome will render that when i'm not trying to attach it in javascript.

Chrome 在加载字体时非常挑剔，因为这可能是一项耗时的任务。尝试在页面某处添加具有该类的隐藏元素:

<span style="visibility:hidden" class="WebFonts">V</span>

然后 Chrome 会知道在呈现页面时加载字体，并在您将其动态添加到链接时准备就绪