Bootstrap tooltip onblur firing twice

Question

I have been reading through S.O and I am seeing that the blur event is getting called twice for many people. I'll be honest, I just don't understand why.

JavaScript:

// call tooltip
initTooltip($element, {'trigger': 'manual', 'placement': 'bottom', 'title': Messages[$element.id + 'Required']});



initTooltip: function($element, options) {
    console.log('--- initTooltip ---'); // this is getting executed 1x
    $('#' + $element.id).tooltip({
        'placement': options.placement,
        'title': options.title,
        'trigger': options.trigger
    }).on({
        'blur': function() {
        console.log('ON BLUR EVENT'); // this is getting executed 2x.
        $('#' + $element.id).tooltip('show');
        }
    });

My params are coming in correctly, my messages are all correct when I log everything out. Just not sure how to get around the blur event getting executed twice.

I've also tried using focusout but no luck.

Answer 1

You are attaching a blur event handler every time you call your initTooltip function so on blur they will be fired all.

You can eventually reconsider your code or move from jQuery on to jQuery one event handler:

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Demo: http://jsfiddle.net/Usk3P/