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

时间:2012-05-25 14:17:07

标签: jquery css html

我正在尝试通过onclick更改<asp:linkbutton中的文字。代码似乎在IE和Firefox中运行良好,但在Chrome中无效。

这是我正在使用的代码

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

btn是通过onclientclick函数传入的parm。就像我说的,这是在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 ';

更多信息..不确定我到底在哪里

2 个答案:

答案 0 :(得分:1)

我认为这里的关键词是:

  

这是webfont css类,当我不是时,chrome会渲染它   试图在javascript中附加它。

Chrome在加载字体时非常挑剔,因为这可能是一项非常耗时的任务。尝试将某个隐藏元素添加到您的页面的某个位置:

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

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

答案 1 :(得分:0)

您的代码导致解析错误;这应该更好:

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

我在class

附近添加了引号