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