innerHTML nullifies jQuery

I'm using a jQuery-based tooltip (TipTip by Drew Wilson) which works well except for javascript/ajax innerHTML-generated content. Any page content generated via innerHTML nullifies the tooltip, leaving me with only the browser's default title tag box. I have tried 2 solutions:

(1) Restructure my code to prevent innerHTML from changing any title tag-linked elements (2) Implement jQuery .addClass using .hover, .mouseover, .mouseenter and .on(mouseenter,function(){

One example of approach (2) follows, where the innerHTML of 'UserPicHolder' is updated when TestFunction() is called, followed by an attempt with jQuery to addClass TipTip (based on discussion found at: mouseover and addClass jQuery example) to the image with id="Test" (I have also tried this with the anchor tag)

<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>

Does anyone have any suggestions about how I can apply the tooltip to the innerHTML-derived content?

---

Try .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

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

Syntax

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

链接地址: http://www.djcxy.com/p/80908.html

上一篇: 工具提示在jQuery中动态创建的内容

下一篇: innerHTML使jQuery无效