1

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;
}
Misha Moroshko
  • 148,413
  • 200
  • 467
  • 700
  • I am confused at what you are trying to do? It works for me after the inputs have been appended. – Jason Oct 28 '10 at 05:18
  • Unless you are talking about it not focusing after the `fadeIn` try `$("input:first").focus().focusin();` – Jason Oct 28 '10 at 05:22

1 Answers1

2

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

Alastair Pitts
  • 18,689
  • 9
  • 63
  • 95