jQuery события на динамических элементах не работают

Question

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

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

Показать подсказку

Urb.showTooltip = function() { 
    var $element = $(this); 
    var $tooltip = $element.data('tooltip'); 
    var $tip = $element.attr('title'); 

    console.log('show'); 

    if(!$tooltip) { 
     // create a tooltip element 
     $tooltip = $('<div />'); 
     $tooltip.addClass('tooltip'); 
     $tooltip.text($tip); 
     Urb.$body.append($tooltip); 

     // position the tooltip 
     Urb.positionTooltip($tooltip, $element); 
     $element.data('tooltip', $tooltip); 

     // activate custom tooltip and deactivate browser tooltip 
     $tooltip.addClass('active'); 
     $element.attr('tooltip', $tip); 
     $element.removeAttr('title'); 
    } else { 
     // position and activate custom tooltip 
     Urb.positionTooltip($tooltip, $element); 
     $tooltip.addClass('active'); 
    } 
}; 

Скрыть подсказку

Urb.hideTooltip = function() { 
    var $element = $(this); 
    var $tooltip = $element.data('tooltip'); 

    console.log('hide'); 

    if($tooltip){ 
     $tooltip.removeClass('active'); 
    } 
}; 

Примечание: Urb только глобальный объект, который я создал в качестве имен для моего проекта.

Итак, ничего сумасшедшего там не происходит. Изначально я прикрепил логику подсказки к .hover() функции JQuery в:

$('[title]').hover(Urb.showTooltip, Urb.hideTooltip); 

Это работало просто отлично, но теперь, когда я пытаюсь прикрепить события к динамическим элементам, то Urb.hideTooltip не вызывалось на всех, как это Безразлично» t даже зарегистрировать «скрыть» на моей консоли.

Urb.$body.on('mouseover', '[title]', Urb.showTooltip); 
Urb.$body.on('mouseleave', '[title]', Urb.hideTooltip); 

Примечание: Urb.$body является ссылка на $('body')

Почему не функция hideTooltip дозвонились? Что мне не хватает?

Answer 1

Решение 1

Использование CSS-только :hover всплывающие подсказки с использованием :after псевдо-элементов с content: attr(title)).

См: W3schools

Предупреждение: это не для всех браузеров там, как IE, который получает осталось позади каждый раз ...;)

Solution 2

I Я немного переписал ваш код, чтобы избежать ссылок на ошибки и т. д. Единственное, чего не хватает, это функция позиционирования.

EDIT: Теперь он не использует ни одного подсказки <div>, но устанавливает подсказку <div> «S для каждого элемента на первом парение, удалив title и после использования его для создания подсказки <div>.

Посмотрите:

var Urb = {}; 
 

 
Urb.showTooltip = function() { 
 
    // Get current element 
 
    var $element = $(this); 
 

 
    // Get tooltip data (if it's there) 
 
    var tooltipText = $element.data('tooltip'); 
 

 
    // Get title for backup 
 
    var tip = $element.attr('title'); 
 

 
    console.log('show'); 
 

 
    // If title is still set, set it to tooltip data and remove title attribute 
 
    if(typeof tip !== undefined && tip !== false) { 
 
     // Remove title attribute 
 
     $element.removeAttr('title'); 
 
     // Create new tooltip div 
 
     var $newTip = $('<div />').addClass('tooltip').text(tip); 
 
     // Append it to the element 
 
     $element.append($newTip); 
 
    } 
 

 
    $element.find('div.tooltip').addClass('active'); 
 
    
 
}; 
 

 

 
Urb.hideTooltip = function() { 
 

 
    console.log('hide'); 
 

 
    // Empty tooltip div and deactivate it 
 
    $(this).find('div.tooltip').removeClass('active'); 
 

 
}; 
 

 

 

 
var last_item_nr = 3; 
 

 
function addItem() { 
 
    var next_nr = ++last_item_nr; 
 
    
 
    $elm = $('<div></div>'); 
 
    
 
    $elm 
 
    .html('Item ' + next_nr + '<div class="tooltip">Tooltip for item ' + next_nr + '</div>') 
 
    .hover(Urb.showTooltip, Urb.hideTooltip); 
 
    
 
    $('#items').append($elm); 
 
    
 
    console.log('Added item ' + next_nr); 
 
} 
 

 

 
$(document).ready(function() { 
 

 
    Urb.$body = $('body'); 
 

 
    $('#items > div').hover(Urb.showTooltip, Urb.hideTooltip); 
 

 
});

#items > div { 
 
    position: relative; 
 
    float: left; 
 
    clear: left; 
 
    width: 200px; 
 
    border: 1px solid #eee; 
 
} 
 

 
#items > div > .tooltip { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 100%; 
 
    background-color: #ccc; 
 
    opacity: 0; 
 
} 
 

 
#items > div > .tooltip.active { 
 
    opacity: 1; 
 
}

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

 
<button onclick="addItem();">Add item</button> 
 
<div id="items"> 
 
    <div title="Tooltip for item 1">Item 1</div> 
 
    <div title="Tooltip for item 2">Item 2</div> 
 
    <div title="Tooltip for item 3">Item 3</div> 
 
</div>

Answer 2

OMG, я не могу поверить, что я не думаю, что это !!!

В моей функции showTooltip, я удаляю атрибут title!

Какой идиот!

$element.removeAttr('title'); 

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

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

Update:

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

// showTooltip 
$element.attr('data-title', $tip); 
$element.removeAttr('title'); 

// window.load 
Urb.$body.on('mouseover', '[title], [data-title]', Urb.showTooltip); 
Urb.$body.on('mouseleave', '[title], [data-title]', Urb.hideTooltip);