jQuery dynamically generated textbox not behaving correctly

Question

I have table columns with values in them and when you click the edit button, I am creating a textbox with the column value in it, kind of like an edit-in-place feature.

var title = item.find('.co_edit_title').html("<input type='text' style='width:240px' name='title' value='" + item.find('.co_edit_title').text() + "' />");

Works fine, the input box appears with the value supplied. The problem is that in FF, Chrome, and Safari, the textbox doesn't behave like it normally would. The backspace key works fine but normal keyboard functionality doesn't.

For instance, SHIFT + arrow doesn't highlight characters and the left and right arrow keys don't move the cursor left and right. The up and down keys move the cursor left and right for some reason. Finally, in IE there are these same problems in addition to the backspace key acting as if it is not in the textbox, it makes the browser go back a page.

Any thoughts on why this is happening?

EDIT: Should have pointed this out before but all of this is happening inside of a Fancybox popup which is displaying inline content that is already on the page. The only dynamic part is the replacing of the column values with a textbox.

Answer 1

I tried just adding a textbox to a div and the textbox works normally as it should. See for yourself here: http://jsbin.com/inapo4. Could it be something with the item.find() not working right? The "item" is just a jQuery object right?

Answer 2

Found the problem, it was with Fancybox itself. Arrow navigation is screwed up because of an event listener. Supposed to be fixed in 1.3.2.

Source