I have no idea why this is happening, but using very similar code to try to focus two different <textarea> elements only works on one.
On my page I have a textarea into which users may type a reply, but users may also edit their replies via a textarea that is loaded onto the page with AJAX; I've been successful at giving this "edit" textarea focus once it is loaded.
However, both textareas have formatting buttons (bold, italic, etc.) associated with them, and I would like these buttons to focus the appropriate textarea upon being clicked.
The problem is that this only works with the normal textarea, not the one loaded in with AJAX, even though the HTML for both input areas is the same (except for the IDs of course).
Why would this happen? This is the only problem I seem to be having with focusing elements on my website.
//Loads in the edit textarea with AJAX
function editComment()
{
var edited = false;
$("#content").on("click", ".edit-button", function(event){
event.preventDefault();
var commentID = this.id.match(/\d+/);
var container = "#comment-" + commentID;
if (!edited)
{
$(container).data("old-state", $(container).html());
$(container).load("/php/_edit.area.php", {
id: commentID
}, function(){$("#edit-text-area").focus();}); //this works
edited = true;
}
else if (edited)
{
edited = false;
$(container).html($(container).data("old-state"));
}
});
}
//Inserts formatting on the default textarea
function handleFormatting()
{
$('#format-button').on("click", function(event)
{
event.preventDefault();
//do formatting
$("#default-text-area").focus(); //this works
});
//Inserts formatting on the edit/AJAX textarea
function handleEditFormatting()
{
$('#edit-format-button').on("click", function(event)
{
event.preventDefault();
//do formatting
$("#edit-text-area").focus(); //this does not work
});
$(document).ready(function(){
editComment();
handleFormatting();
handleEditFormatting();
});
[EDIT] To clarify, while I have been able to give the edit textarea focus once it is loaded in, I would like users to be able to click out of this textarea (perhaps to move around the page for whatever reason) and then have the buttons give focus again once they are pressed.
