jQuery append на hover вызывается дважды

Question

Я пытаюсь добиться чего-то похожего на то, что у вас есть в конце Wordpress, где, когда вы наводите курсор мыши на строку в таблице сообщений, она отображает ссылки редактирования, корзины и предварительного просмотра.

Однако, когда я пытаюсь это сделать, он добавляет ссылки дважды, что является небольшой проблемой.Я читал, что режимы зависания дважды отключаются при наведении курсора в Chrome, но попробовал это в опере, и возникла та же ошибка, так что я не думаю, что это проблема.об этом.

А вот код

// Table row hover displays links

$('table.tablesorter tbody tr').hover( 
     function() {  // mouseover 
          $(this).children('td:nth-child(2)').append('<p class="links"><a>Edit</a><a>Preview</a><a>Delete</a></p>'); 
     }, 
     function() {  // mouseout 
          $(this).children('td:nth-child(2)').find('p.links').remove(); 
     } 
   );

Вы видите, почему он добавляет ссылки дважды, а не один раз?

Answer 1

Вы включили js/custom.jquery.js дважды.Один раз в head и один раз после body закрывается.То же самое с jquery

Answer 2

Создание элементов при наведении курсора / наведении мыши - это гораздо больше работы в браузере, чем создание этих элементов (уже в разметке с display:none;) и их отображение / скрытие.ваши mouseover и mouseout, вероятно, ОБА работают, и он не может найти элемент для удаления и продолжает добавлять его ..

$('table.tablesorter tbody tr').hover( 
     function() {  // mouseover 
          $(this).find('.myControls').fadeIn(); 
     }, 
     function() {  // mouseout 
          $(this).find('.myControls').fadeOut(); 
     } 
   );

Answer 3

Он не отвечает на ваш вопрос, но вы можете скрыть свой

, когда мышь отсутствует, и показать его, когда мышь наведена.

Answer 4

вы должны проверить это вы получаете тот же объект или нет

пример:

$('#updateCart').on('mouseenter', function (event) {
        if (event.handled !== true) { .....
                  //Put your code in here
          }
}