在DOM中动态附加的<span>的宽度

Question

这看起来很简单，但我无法弄清楚这里出了什么问题。我已动态添加<span>，如下所示：
$("#parent").append("<span style='display:inline-block; position:absolute; background:yellow; z-index:10; top:12px;' id='mathBox"+flag_id+"'></span>");

现在我需要在按某个键时查找此<span>的宽度（在我的情况下为TAB！） 最初我试过像这样的jquery：
var width_of_text= $("'mathBox'+flag_id").width(); alert(width_of_text);
但这是在控制台中显示错误，这个表达式没有被识别出来（即使我觉得有些东西不在这里!!）
然后我尝试使用vanila JS如下：
var mathBox_id=document.getElementById('mathBox'+flag_id); var width_of_text= mathBox_id.offsetWidth; alert(width_of_text);

现在这个工作正常，但它显示我错误的宽度。 DOM上存在的<span>元素（在测试时），宽度仅为25宽度，但宽度为111宽度。 我知道我必须做一些愚蠢的事情，但我只是无法抓住它。
请帮忙!!

Answer 1

jQuery版本的语法是

var width_of_text= $('#mathBox'+flag_id).width();
alert(width_of_text);

Answer 2

var width_of_text= $('mathBox'+flag_id).width();使用带有ID的#符号。

var width_of_text= $('#mathBox'+flag_id).width();