2

我使用 jquerytools 的工具提示插件（http://jquerytools.org/documentation/tooltip/index.html）。我不明白如何将它绑定到动态加载的元素。

我使用它的“正常”方式是：

$(".myElementClass").tooltip({ 
  effect: 'slide',
  tip: '#myTipId',
  offset: [40, 0],
  relative: true,
  position: 'top center'
})

但是如果 .myElementClass 由 ajax 加载，这将不起作用。在动态加载的元素中，我使用这样的“on”sintax：

$(document).on("hover", ".myElement",function(){
  ...do something ...     
})

我应该如何混合这两种东西？

编辑特里斯坦正确答案后：

$(document).on("hover", ".myElementClass",function(){
    tooltip=$(this).tooltip({
            effect: 'slide',
            tip: '#myTipId',
            offset: [40, 0],
            relative: true,
            position: 'top center',
            api:true
        });
        tooltip.show();
    })
4

1 回答 1

1 
<script type="text/javascript">
  $(function() {
     $("input[type=button]").click(function() {
        $(".output").append("<div class='added' style='background-color:red;'>Hover Me , You will get tooltip</div>");
     });
     var tooltip = null;
     $(".output").on("hover", ".added", function () {
        if (tooltip == null) {
           tooltip = $(this).tooltip({
              effect: "slide",
              tip: "#myTipId",
              offset: [40, 0],
              relative: true,
              position: "top center",
              api:true
           });
        }
        tooltip.show();
     });
  });


<body>
   <div id="myTipId" style="display:none;">I'm tooltip</div>
   <input type="button" value="Add new Item" />
   <div class="output" style="border:1px solid black;"></div>
</body>

说明：设置config.api = true。如果那样， fn.tooltip(conf) 将返回 taketip 对象而不是目标 HTML 元素本身。参考源码https://github.com/jquerytools/jquerytools/blob/master/src/tooltip/tooltip.js #352

于 2013-01-06T02:12:16.433 回答