javascript - 如何使用 glyphicon bootstrap 更改按钮文本并保留顺序？

Question

我有一个搜索栏和一个带有文本和图标的提交按钮。所以，我想用另一个文本替换它，并在单击另一个按钮时在右侧保留相同的图标。但是当我尝试时，图标先出现并弄乱了文本。如何保持相同的顺序和模式？

我做错了什么？欢迎任何帮助。这里有一些图像来显示正在发生的事情。

Before and after replace

还有我的函数代码来替换文本。

$('#button').click(function(e) {
  $("#submit").text("New Search");
  $("#submit").addClass('glyphicon glyphicon-search');
});

现场演示: https://jsfiddle.net/gheleri/mL2btnws/3/

Answer 1

Glyphicons 并不是作为一个类直接添加到按钮中，而是作为内联标记添加，例如 i 或 span。

我更改了您的 fiddle ，以将带有图标标签的文本作为 HTML 插入。看这里:https://jsfiddle.net/mL2btnws/5/