Question

I have a TD that contains two divs. The first div contains text and is visible. The second div contains a textarea and is hidden by default. Using the code below, I’ve bound to the click event of the TD and swapped the visibility of the div’s on click:

$(".tdEstimatorNote").click(function (e)
{
    $(this).find("div:first").toggle("400");
    $(this).find("div:first").next().toggle("400");
    $(this).find(".estimatorNotesTA").focus();
});

Although this works, it created an issue with the textarea. When I attempted to put the focus on the textarea after it became visible, the div’s would swap visibility again (because I’m bound to the click event of the TD). So, my solution, stop the event propagation:

$(".estimatorNotesTA").click(function (event)
{
    event.stopPropagation();
});

This works – sort of. I’m able to freely edit and click inside the textarea now, but I’m not able to range select any text (I’m assuming because of the jQuery above). It’s possible that my assumption is incorrect, because I’m unable to range select text via the keyboard as well (shift + end or shift + home). Any thoughts / suggestions?

Answer 1

Not sure where the problem comes from, but you can just test whether the textarea was clicked:

$(".tdEstimatorNote").click(function (e){
    if(!$(e.target).hasClass('estimatorNotesTA')) {
        //Toggle CSS class
        // use method chaining :)
        $(this)
           .find("div:first").toggle("400");
              .next().toggle("400").end()
           .end()
           .find(".estimatorNotesTA").focus();
    }
});