[SOLVED] Why the "focusin" event handler isn't called?

Why the "focusin" event handler isn't called?

Why in the following code the focusin event handler isn't called ?

HTML:

<div id='wrapper'></div>
<div id='button'>Click Here</div>
<div id='output'></div>

JS:

$(function() {
    $('input').live('focusin', function() {
        $('#output').html('focusin'); // Why this not happens ?
    });
    $('#button').click(function() {
        $('#button').hide();
        build_inputs();
    });    
});
function build_inputs() {
    var html = "<input type='text' /> \
                <br /> \
                <input type='text' />";
    $('#wrapper').append(html);
    $('#wrapper').fadeIn(500, function() {
        $('input:first').focus();
    });
}

CSS:

#wrapper {
    display: none;
    background: #aaa;
    width: 170px;
    padding: 20px;
}

Solution

For some reason, I'm not positive why, .focus() doesn't trigger the focusin event.

You can replicate this behaviour by changing the focus line to add .trigger('focusin').

so your fadeIn code becomes:

$('#wrapper').fadeIn(500, function() {
    $('input:first').focus().trigger('focusin');
});

You can test it here: http://jsfiddle.net/yt7Jd/

EDIT: As Jason mentioned, you can also call the .focusin() method instead of the .trigger('focusin').

EDIT 2: It appears to be a bug in 1.4.3. It has been logged with the jQuery team for fixing: http://bugs.jquery.com/ticket/7340