help with focusing a dynamically created input

Question

my code is this. on jsfiddle.

var inp = $('<input>').attr({'class':'txtEdit txt', 
    'type':'text'})
    .val($(this).html()).blur(function (){
        if($(this).val().length != ''){
            $(txt).replaceWith($(editable)
                .html($(this).val()));
        }
        else{ alert("Cannot contain empty value!")}
    }).keydown(function (e){
            if(e.keyCode == 13 || e.keyCode == 9){
                e.preventDefault();
                $(this).trigger('blur');
            }
    }).appendTo($(txt));

I am creating an input element with lots of events and adding to div. Now i want to focus it as it is appended to DOM. but focus does not seem to be working.

Here's the total code.

<html>
    <head>
        <title>My jQuery plugin</title>
        <script src="jquery.js"></script>
        <script>
            $(function ()
            {
                    $('.editable').txtEdit();
            });

            (function($){
                $.fn.txtEdit = function() {
                    var editable = $(this);

                    $(editable).live('click', 
                        function ()
                        {
                            var txt = $('<div>').attr('class', 'txtEdit div');
                            var inp = $('<input>').attr({'class':'txtEdit txt', 
                                            'type':'text'})
                                        .val($(this).html()).blur(function (){
                                                if($(this).val().length != ''){
                                                    $(txt).replaceWith($(editable)
                                                        .html($(this).val()));
                                                }
                                                else{ alert("Cannot contain empty value!")}
                                            }).keydown(function (e){
                                                    if(e.keyCode == 13 || e.keyCode == 9){
                                                        e.preventDefault();
                                                        $(this).trigger('blur');
                                                    }
                                            }).appendTo($(txt));
                            $(this).replaceWith(txt);                           
                        }
                    );
                };
            })(jQuery);
        </script>
    </head>
    <body>
        <div class="editable">this is editable div</div>
    </body>
</html>

Anyone any ideas??

Regards,

score 4 · Accepted Answer · answered Apr 11 '11 at 06:48

4

add

inp.focus();

after

$(this).replaceWith(txt);

Because your div is created after focus action, which is wrong. You should display the div and then focus on input.

answered Apr 11 '11 at 06:48

benck

2,034
1
22
31

score 1 · Answer 2 · answered Apr 11 '11 at 06:49

1

Instead of chaining the focus add this after creating the input box.

inp.focus();

answered Apr 11 '11 at 06:49

Jake

2,471
15
24

score 1 · Answer 3 · answered Apr 11 '11 at 06:51

1

Just do

inp.focus();

after the $(this).replaceWith(txt);

What you were doing is trying to focus the element before you add it to the DOM (while it was still in memory).

live at http://jsfiddle.net/gaby/KH7pZ/8/

answered Apr 11 '11 at 06:51

Gabriele Petrioli

191,379
34
261
317

score 1 · Answer 4 · answered Apr 11 '11 at 06:52

1

You need to put

inp.focus();

At the end of your code (once the replacement is done);

Here's your updated fiddle : http://jsfiddle.net/KH7pZ/9/

answered Apr 11 '11 at 06:52

JohnP

49,507
13
108
140

help with focusing a dynamically created input

4 Answers4

Linked