Question

我使用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();
    })

Answer 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

jquery - 将插件/事件绑定到动态加载的元素

1 个答案: