刚刚添加的元素上的jquery next（）

Question

Here's what I'm trying to have happen:

• someone enters text into an input field
• when they hit ENTER on their keyboard, it adds an input field AFTER the current input field using the after() function, then it focuses that input field so they can continue typing and do this over and over

heres my code which is not working:

$('.table-todo input[type=text]').live('keypress', function (e) {   
    if (e.which == 13) 
    {
        $parent = $(this).parent('.field');     
        $.get('projects-add-task.php?show_delete=yes', function (data) { $parent.after(data); }, 'html');
        $(this).next('input[type=text]').focus();
    }
});

heres the contents of projects-add-task.php:

<div class="field">
<input type="text" name="task[]" />
<a href="#" title="Add Task Below" class="todo-add"><img src="images/icon-todo-add.png" alt="" onmouseover="this.src='images/icon-todo-add-h.png'" onmouseout="this.src='images/icon-todo-add.png'" /></a>
<?php if ($_GET['show_delete'] == 'yes') { ?>
<a href="#" title="Delete This Task" class="todo-delete"><img src="images/icon-todo-delete.png" alt="" onmouseover="this.src='images/icon-todo-delete-h.png'" onmouseout="this.src='images/icon-todo-delete.png'" /></a>
<?php } else { ?>
<img src="images/icon-todo-delete-o.png" alt="" />
<?php } ?>
<div style="clear: both;"></div>
</div>

its just not focusing the input that was added via $.get and i cant figure out how to fix it. it is adding the next input field to the page fine, but its not focusing it.

Answer 1

You can do it like this:

    $parent = $(this).parent('.field');    
    $this = $(this);
    $.get('projects-add-task.php?show_delete=yes', function (data) { 
        $parent.after(data); 
        $parent.next().children('input[type=text]').focus();
    }, 'html');

The problem is that the next input element is not actually created when $(this).next('input[type=text]').focus(); is executed because you are using an AJAX call to create it. Also you need the parent's next element.