jquery set focus to dynamically generated element

Question

I've run into this a number of times, where I wish to reset focus to (and or select the contents of) a dynamically generated element after failing some or other validation (typically on change or blur), but I have never come up with a satisfactory solution. Why won't this work? MyFiddle

jQuery(function(){
    jQuery("body").append("<input type='text' id='test' size='5'/>&nbsp;&nbsp;<button>Go</button>");
    jQuery('body').on('blur', '#test', function()
    {   var test = jQuery(this).val();
        if(test && !isNumber(test))
        {   alert('Not a Number!');
            jQuery(this).focus().select();
            //jQuery('#test').focus().select();
        }
    });
});
function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
}

score 4 · Accepted Answer · answered Jan 26 '13 at 14:17

4

You can try using setTimeout function:

$('#test').on('blur', function () {
    var $this = $(this), test = this.value;
    if (test && !isNumber(test)) { 
         setTimeout(function() {
            $this.focus().select();
         }, 4);
    }
});

http://jsfiddle.net/tFAaf/

answered Jan 26 '13 at 14:17

Ram

143,282
16
168
197

1

Well slap me up and call me Ruth! I like it! – WallabyKid Jan 26 '13 at 14:26

score 1 · Answer 2 · answered Jan 26 '13 at 14:13

1

What happens if you try this:

$(function(){
    $("body").append("<input type='text' id='test' size='5'/>&nbsp;&nbsp;<button>Go</button>");

    $('#test').on('blur', function() {   
        if (isNaN(this.value)) {   
            alert('Not a Number!');
            $(this).focus();
        }
    });
});

If the element has no value when the user toggles out of the element, it focuses it and raises an alert. This is what you want, no?

answered Jan 26 '13 at 14:13

hohner

11,498
8
49
84

Not sure what you've changed beyond removing.select(), but no, it doesn't work. That's where I started. Edit, my bad... you've alterend the event handler... let me test in fiddle and get back. – WallabyKid Jan 26 '13 at 14:15
This event handler won't work as the element is dynamically appended. The OPs orignal `on()` signature was correct. – Rory McCrossan Jan 26 '13 at 14:19
Well... color me surprised, as the event handler actually works in the fiddle (I didn't think it would either), however the focus still doesn't – WallabyKid Jan 26 '13 at 14:24

score 0 · Answer 3 · answered Jan 26 '13 at 14:15

0

this:

jQuery('body').on('blur', '#test', function()

should be:

jQuery(document).on('blur', '#test', function()

answered Jan 26 '13 at 14:15

ROY Finley

1,406
1
9
18

No, attaching the event to the `body` is perfectly fine. Attaching a delegated event handler to the `document` is the last thing you should do - it's the reason why `live()` was deprecated. – Rory McCrossan Jan 26 '13 at 14:17
@RoryMcCrossan I understand the depreciated reasoning of `live()` . The user asked why it would not work in js fiddle. She had no body tag in html, or am i missing something. – ROY Finley Jan 26 '13 at 14:42
there's always a body tag. jsFiddle adds it for you. – Rory McCrossan Jan 26 '13 at 14:46
@RoryMcCrossan okay got it, do not use fiddle that much. thanks. – ROY Finley Jan 26 '13 at 14:46
No problems :) blah blah, content length warning etc. – Rory McCrossan Jan 26 '13 at 14:47

jquery set focus to dynamically generated element

3 Answers3