1

I am trying to generate some buttons on hover but they don't display. I did console.log() and the elements are printed to the console, but still not shown where they need to be.

I have searched a lot about these dynamically generated elements questions on SO however all of them are concerned with handling events on dynamically generated elements not why dynamically generated elements are not being shown up.

This question was effectively my question and it suggested to not have similar IDs but I have used class instead.

When I use body in place of this, the problem seems to be solved partially but this doesn't let me select the specific button I am hovering over.

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>
MTCoster
  • 5,868
  • 3
  • 28
  • 49
Dhiraz Gazurel
  • 104
  • 1
  • 10
  • `this` inside `forEach()` has a different context so `$(this)` is not what you think it is – charlietfl Feb 10 '19 at 14:00
  • @charlietfl yes, this solves the issue. But he also should note the he is missing a `"` around the class name in the second button template. You closed the question before I could post my answer :) – Itay Gal Feb 10 '19 at 14:04
  • @ItayGal so that is a simple typo. No need to re-open for a typo. The duplicate solves the main problem – charlietfl Feb 10 '19 at 14:07
  • ok there was the problem. So I stored the contents in a new array variable inside the foreach and did the append thing outside of it. And it works. You saved the day – Dhiraz Gazurel Feb 10 '19 at 14:10

0 Answers0