добавление всплывающего окна во время события наведения мыши для динамически генерируемой таблицы - PullRequest
Новая
       27

добавление всплывающего окна во время события наведения мыши для динамически генерируемой таблицы

0 голосов
/ 03 мая 2020

Относительно новый для javascript и jquery, и у меня есть пара вопросов о слушателях событий в jquery.

Итак, у меня есть форма HTML, которая динамически генерирует таблицу.

Цель состоит в том, чтобы создать событие таким образом, чтобы при наведении курсора на определенную ячейку рядом с ней появлялось всплывающее окно.

Я пробовал это:

HTML - тег, к которому JS подключен 

let td_inter = document.createElement('td')
td_inter.innerHTML = "test"           
td_inter.classList = 'popover'
td_inter.setAttribute('data-html', 'test')
td_inter.setAttribute('data-position',"bottom left")
td_inter.setAttribute('data-variation',"very wide")

JS

$(document).on("mouseover", 'td.popover', function() {
    $('td.popover')
    .popup({
        on: 'hover',
    });
})

Причина, по которой я попытался это сделать, заключается в том, что у меня есть предыдущий статус c div выше со следующим работающим кодом.

HTML - тег, к которому JS подключен 

  <div class='thirteen wide field'>
       <div class='desc' id='test_desc' data-html="" data-position="bottom left" data-variation="very wide">
            <label for="test">test label</label>
        </div>
  </div>

JS

$('div.desc')
.popup({
    on: 'hover',
});

Я понимаю, что мне нужно было использовать .on, чтобы заставить его работать для динамически генерируемой таблицы, но, похоже, это не работает. Кажется, что событие работает, когда я нахожусь (я пытался только в console.log), но я не могу показать всплывающее окно. Должен ли я поместить его в div?

дополнительный фон: я использую semanti c ui, если это поможет. Я также включил эти ресурсы, если это поможет: 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Ответы [ 2 ]

0 голосов
/ 04 мая 2020

Для всех, кому было интересно, мне пришлось реструктурировать свою динамическую таблицу c, чтобы сгенерировать ее примерно так:

HTML: 

<table class="ui table">
   <thead>
      <tr>
         <th class="one wide">Key</th>
         <th class="two wide">Value</th>
      </tr>
   </thead>
   <tbody>
      <tr class="popover">
         <td>1</td>
         <td>Foo</td>
      </tr>
      <div class="ui popup mini transition hidden">Foo Longer</div>
   </tbody>
</table>

JS: 

$(document).on('mouseover', '.popover', function() {
  $(this)
  .popup({
         popup: $('div.popup'),
         inline:true,
          on:'hover',
          position: 'right center',
          lastResort: 'right center',
     }).popup('show');
});

div.popup установлен на скрытый и станет видимым, как только событие будет выполнено (mouseover в этом случае).

образец: https://jsfiddle.net/gr0e4cwt/11/

0 голосов
/ 03 мая 2020

Вы можете просто попробовать ниже код в JS вместо использования document.mouseover: 

$('td.popover')
.popup({
    on: 'hover',
});
...