JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="onfocus block">focused</div>
<div class="onblur block">blurred</div>
<div class="onfocus2 block">focused2</div>

CSS

.block {
    background: lightgray;
    height: 100px;
    margin: 10px;
}
.block.triggered {
    background: green;
}

JavaScript

var element = $('<div><input type="text" /></div>');
var element2 = $('<div><input type="text" /></div>');

function fnfocus() {
    $('.onfocus').addClass('triggered');
}
function fnblur() {
    $('.onblur').addClass('triggered');
}
function fnfocus2() {
    $('.onfocus2').addClass('triggered');
}

element.find('input').on('focus', fnfocus);
element.find('input').on('blur', fnblur);
element2.find('input').on('focus', fnfocus2);

// 'focus' isnt triggered
element.find('input').trigger('focus');
// 'blur' works
element.find('input').trigger('blur');
// 'focus' only gets triggered when it
// is attached to the document
element2.appendTo('body');
element2.find('input').trigger('focus');