为什么动态生成的元素未在悬停时显示？

Question

我正在尝试在悬停时生成一些按钮，但它们不显示。我做了console.log()，并将元素打印到控制台，但仍未显示它们的位置。

我在SO上搜索了很多有关这些动态生成的元素的问题，但是所有这些问题都与处理动态生成的元素上的事件有关，而不是为什么没有显示动态生成的元素。

This question实际上是我的问题，它建议没有相似的ID，但我改用class。

当我使用body代替它时，问题似乎已部分解决，但这不能让我选择要悬停的特定按钮。

var commonConverters = ['Angle', 'Area', 'Data Storage', 'Data Transfer', 'Energy', 'Length', 'Number System', 'Pressure', 'Shoe Size', 'Speed', 'Temperature', 'Time', 'Volume', 'Weight'];
var financeConverters = ['Compund Interest', 'Discount', 'Simple Interest', 'Tax', 'EMI'];

$(document).ready(function() {
  $(".nav-element").on({
    mouseenter: function() {
      // Stuff to do on mouse enter
      let hov = $(this).text();

      switch (hov) {
        case 'Common Converter':
          commonConverters.forEach(function(index) {
            let newButtonns = '<button class = "default-tabs">' + index + ' </button>';
            console.log(newButtonns);
            $(this).siblings('.options').css('display', 'block');
            $(this).siblings('.options').append(newButtonns);
          });
          break;

        case 'Finance Converter':
          financeConverters.forEach(function(index) {
            newButtonns = '<button class = "default-tabs>' + index + ' </button>';
            console.log(newButtonns);
            $(this).siblings('.options').css('display', 'block');
            $(this).siblings('.options').append(newButtonns);
          });
          break;
      }
    },
    mouseleave: function() {
      // Stuff to do on mouse leave
      $(this).siblings('.options').html('');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li class="nav-list"><button class="nav-element">Common Converter</button>
    <div class="triangle"></div>
    <div class="options">hello</div>
  </li>
  <li class="nav-list"><button class="nav-element">Finance Converter</button>
    <div class="triangle"></div>
    <div class="options"></div>
  </li>
</ul>