mouseenter for dynamically added content

Question

I have these two events mouseenter() and 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');
});

For some input fields that are disabled, I add the tltp class and the TwitterBootstrap tooltip dynamically to it like so:

// 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();
}

But for these input fields that are disabled and to which the tltp class gets added dynamically to it, the mouseenter event never gets fired.

Answer 1

Use On instead:

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

try this:

 $('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');
});

you should use .on for dynamically added content

Answer 3

Try to use on() for dynamic elements like,

$(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');
});