动态元素上的jquery工具提示答案

【问题标题】：jquery tooltip on dynamic element动态元素上的jquery工具提示
【发布时间】：2011-03-18 14:01:53
【问题描述】：

我使用这个tooltip 插件将元素上的工具提示设置为

$('.showtooltip').tooltip({
            delay: 0,
            track: true,
            showURL: false,
            bodyHandler: function() {
                var tipStr = "SOME DISPLAY HTML";
                return $(tipStr);
            }
        });

我的 ajax 动态创建元素。

$("<img alt='' class='showtooltip' src='image.jpg' />");

所以当这个图像被添加到文档中时。工具提示不显示。然后我在 jquery 中使用 live() ：

$(".showtooltip").live("mouseover", function() {
                $(this).tooltip({
                    delay: 0,
                    track: true,
                    showURL: false,
                    bodyHandler: function() {
                        var tipStr = "SOME DISPLAY HTML";
                        return $(tipStr);
                    }
                })
            });

但工具提示仅在第一次将鼠标悬停在图像上后显示。如何在动态元素上使用工具提示？

【问题讨论】：

标签： ajax dynamic tooltip

【解决方案1】：

我在 ajax 调用后使用了类似的东西来重新绑定。它可能会有所帮助。

$(".showtooltip").live("mouseover",function(){
   if (!$(this).hasClass("tooledUp")){
      $(this).tooltip({
                delay: 0,
                track: true,
                showURL: false,
                bodyHandler: function() {
                    var tipStr = "SOME DISPLAY HTML";
                    return $(tipStr);
                }
      });
      $(this).tooltip().show();
      $(this).addClass("tooledUp");
   }
});

来自论坛：http://static.flowplayer.org/tools/forum/30/37281

【讨论】：

【解决方案2】：

<input type="button" id="btn" value ="Click here" />

$(document).ready(function(){
$("#btn").click(function(){

    $("<input type='checkbox' title='waaaaw' />").appendTo($(this).parent()).ready(function(){
        $(this).tooltip({
                delay: 0,
                track: true,
                showURL: false,
                bodyHandler: function() {
                    var tipStr = "SOME DISPLAY HTML";
                    return $(tipStr);
                }
          }).addClass("tooledUp").show();
    });
});
});

【讨论】：