innerHTML аннулирует подсказку на основе jQuery

Question

Я использую всплывающую подсказку на основе jQuery (TipTip by Drew Wilson), которая хорошо работает, за исключением содержимого, созданного javascript/ajax innerHTML. Любое содержимое страницы, сгенерированное с помощью innerHTML, сводит на нет всплывающую подсказку, оставляя меня только с тегом заголовка по умолчанию в браузере. Я попробовал 2 решения:

(1) Restructure мой код, чтобы предотвратить innerHTML от изменения каких-либо меток, связанных заголовков элементов (2) Реализовать JQuery .addClass с помощью .hover, .mouseover, .mouseenter и .он (MouseEnter, function() {

Следующий пример подхода (2) следует, когда внутреннийHTML «UserPicHolder» обновляется при вызове TestFunction(), за которым следует попытка с jQuery addClass TipTip (на основе обсуждения, найденного по адресу: mouseover and addClass jQuery example) к изображению с идентификатором id = «Тест» (я также пробовал это с привязным тегом)

<script language="javascript" type="text/javascript"> 
function TestFunction(username,userpic) { 
var Title1 = 'Click this photo to learn more about '+username+ ''; 
var username = username; 
document.getElementById('UserPicHolder').innerHTML = '<a href="#null"  
onclick="DisplayUser(\''+username+'\')"><img src="'+userpic+'" 
style="width:60px; height:66px" alt="user picture" title="'+Title1+'" id="Test"> 
</a>'; 
} 
</script> 

<script> 
$(document).ready(function(){ 
    $("#Test").mouseover(function(){ 
    $(this).addClass('TipTip'); 
    }); 
}); 
</script> 

Есть ли у кого-нибудь предложения о том, как я могу применить всплывающую подсказку к содержимому, основанному на innerHTML?

Answer 1

Попробуйте .on()

По мере добавления элементов динамически вы не можете связать события непосредственно к ним .so вы должны использовать Event Delegation.

$(document).on("mouseover","#Test",function(){ $(this).addClass('TipTip'); }); 

Синтаксис

$(elements).on(events, selector, data, handler);