Question

我有两个事件mouseenter()和mouseleave()：

$('.tltp').mouseenter(function () {
    var that = $(this)
    that.tooltip('show');
    console.log("mouseenter event fired");
    that.wait(3000).tooltip('hide');
});

$('.tltp').mouseleave(function () {
    $(this).tooltip('hide');
});

对于已停用的某些input字段，我会动态添加tltp class和TwitterBootstrap tooltip，如下所示：

// shows tooltips for disabled inputs
function AddToolTip(className) {
    d = $('.' + className);
    i = $('.' + className + ' :input');
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "top",
    })
    d.css(i.offset());
    d.attr("title", i.attr("data-title"));
    d.tooltip();
}

但对于已停用且input tltp动态添加到其中的class个字段，mouseenter事件永远不会被触发。

Answer 1

改为使用 On ：

$(document).on("mouseover", ".tltp", function() {
var that = $(this)
that.tooltip('show');
console.log("mouseenter event fired");
that.wait(3000).tooltip('hide');
});

$(document).on("mouseleave", ".tltp", function() {
$(this).tooltip('hide');
});

Answer 2

试试这个：

 $('body').on('mouseenter' , '.tltp'  ,function(){
 var that = $(this)
    that.tooltip('show');
    console.log("mouseenter event fired");
    that.wait(3000).tooltip('hide');
});

 $('body').on('mouseleave' , '.tltp'  ,function(){
  $(this).tooltip('hide');
});

你应该使用.on来动态添加内容

Answer 3

尝试将on()用于dynamic elements，

$(document).on("mouseenter", ".tltp", function () {
    var that = $(this)
    that.tooltip('show');
    console.log("mouseenter event fired");
    that.wait(3000).tooltip('hide');
});

$(document).on("mouseleave", ".tltp",function () {
    $(this).tooltip('hide');
});

mouseenter用于动态添加内容

3 个答案: