在jQuery中添加跨度标签不显示答案

【问题标题】：adding span tag in jquery not displaying在jQuery中添加跨度标签不显示
【发布时间】：2012-05-25 14:17:07
【问题描述】：

我正在尝试通过单击更改 <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>

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

~~~~~~~~~ 这是更多信息..如果我使用它而不是 jquery... webfonts 出现

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

只是更多信息.. 不确定我是否能到达任何地方

【问题讨论】：

你能告诉我们onClientClick以及上面运行jQuery的函数吗？
哪里不工作了？你忘了实际包括你“像我说的”的部分。
你能添加html之前的样子和你想要的之后吗？
我可能有点落后于 jQuery 选择器上下文，但第二个参数不应该在对象或查询字符串上吗？另外我推测“”应该是“span”
@MarcB 编辑失误 ;-) 已修复

标签： jquery css html

【解决方案1】：

我认为这里的关键词是：

这是 webfont css 类，当我不在时，chrome 会呈现它试图在 javascript 中附加它。

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

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

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

【讨论】：

感谢这个.. 我试过了.. 我把代码放在内容页面的顶部。我加倍检查，上面的行在呈现的页面中。然而，它并没有解决问题。
嗯...试试“visible:hidden”而不是“display:none”？
就是这样..如果你能更新你的答案..我会把它标记为正确的..谢谢你的回答和解释

【解决方案2】：

您的代码导致解析错误；这应该更好：

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

我在 class 周围添加了引号

【讨论】：