Невозможно получить высоту динамически создаваемой кнопки с помощью jquery

Question

Что у меня есть:

Я динамически создаю кнопку и пытаюсь получить доступ к ширине кнопки. В этом примере я делаю console.log(), но в моем реальном случае я хочу использовать это значение для других вещей.

let deleteButton = $(document.createElement("button"))
  .addClass("deleteButton")
  .text("delete")
  .click(function() {
    delete(this);
  });

console.log($(deleteButton).width());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Проблема:

Кнопки имеют width и height по умолчанию, но console.log() показывает ноль.

Как получить ширину и высоту кнопки по умолчанию?

Наблюдение: Наиболее вероятный ответ, который нужно принять, - использовать .width() подобные функции jquery или объяснить, почему эта функция не работает, и показать лучшее решение.

Answer 1

Функция $.width() получает текущую вычисленную ширину для первого элемента в наборе соответствующих элементов.

По сути, этот элемент не был обработан / обработан движком, поэтому width недоступен до его добавления в дерево DOM.

let deleteButton = $(document.createElement("button"))
  .addClass("deleteButton")
  .text("delete")
  .click(function() {
    delete(this);
  });

// Here the engine will render/process this element.
$(document.body).append(deleteButton);

console.log($(deleteButton).width());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>