Question

我正在使用基于jQuery的工具提示（Drew Wilson的TipTip），除了javascript / ajax innerHTML生成的内容之外，它运行良好。通过innerHTML生成的任何页面内容都会使工具提示无效，只留下浏览器的默认标题标签框。我尝试了两种解决方案：

（1）重构我的代码以防止innerHTML改变任何与标题标签相关的元素（2）使用.hover，.mouseover，.mouseenter和.on（mouseenter，function（）{

实现jQuery .addClass

接下来是方法（2）的一个例子，其中'UserPicHolder'的innerHTML在调用TestFunction（）时被更新，然后尝试使用jQuery来添加AddClass TipTip（基于讨论：mouseover and addClass jQuery example）到id为“Test”的图像（我也用锚标记尝试了这个）

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

由于元素是动态添加的，因此无法将事件直接绑定到它们。因此，您必须使用Event Delegation。

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

语法

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

innerHTML使基于jQuery的工具提示无效

1 个答案: