我有以下按钮代码：
[{id:1,name:'sit'},{id:2},{id:3}]
我有以下jQuery代码，点击时将html更改为加载图标：
<button type="button" class="btn btn-primary btn-load float-right" data-modal="http://tiger.dev/users/create" data-toggle="tooltip" title="" data-original-title="Create">
<i class="fa fa-plus"></i>
</button>
现在这适用于大多数按钮。在此示例中，控制台显示// show loader and disable button second click
$(document).on('click', '.btn-load', function (event) {
if ($(this).attr('data-original-html')) {
event.preventDefault();
event.preventBubble();
}
else {
$(this).css('width', $(this).outerWidth());
$(this).attr('data-original-html', $(this).html());
$(this).html('<i class="fa fa-spinner fa-spin"></i>');
}
console.log($(this).outerWidth());
});
// restore load button after ajax is complete
$(document).ajaxComplete(function () {
$('[data-original-html]').each(function () {
$(this).html($(this).attr('data-original-html'));
$(this).removeAttr('data-original-html');
$(this).css('width', 'auto');
});
});
outerWidth()。
但是，我还有一个服务器端数据表，它在每行中呈现按钮，因此按钮是动态生成的。以下是其中一个按钮的示例代码：
38.5625 <button type="button" class="btn btn-primary btn-load" data-modal="http://tiger.dev/users/update/1" data-toggle="tooltip" title="" data-original-title="Update">
<i class="fa fa-pencil"></i>
</button>
的控制台日志显示控制台中实际宽度的两倍，例如这个按钮outerWidth()。这是一个问题，因为我希望所有按钮在更改为加载图标时保持相同的宽度。为什么会发生这种情况？我该如何解决？