1

I have some elements that I want to hide once document body is clicked and I have this code from an answer given in SO.

$(document).mouseup(function (e){
    var container = $(".time-stamp, .full-name, .comment-box-wrapper .search-result");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // nor a descendant of the container
    {
        container.hide();
    }
});

It works fine but my page displays 10 different articles at a time and each article has textbox (comment-box) which are wrapped in comment-box-wrapper and attached to each articles where users can submit their comments. These comment boxes are set to hidden by default until a user clicks on Comment button. The problem is if a user has enterred some text in the comment box and clicks elsewhere, the comment-box gets set to hidden and the content is lost completely.

How can I cancel .hide() if comment-box already has some content in it?

Stephan Muller
  • 25,898
  • 16
  • 83
  • 124
Yax
  • 2,049
  • 5
  • 23
  • 51
  • Add additional check in `if` to check `e.target.value.length ` – Shaunak D Apr 19 '15 at 12:04
  • Sorry, I was in a haste. The `comment-box` is wrapped in `comment-box-wrapper` that is set to hidden. Now I want to dig to `comment-box` and find out if it has content before setting `comment-box-wrapper` to hidden. – Yax Apr 19 '15 at 12:09
  • this might help http://stackoverflow.com/questions/1299424/selecting-empty-text-input-using-jquery – unloco Apr 19 '15 at 12:12
  • @UnLoCo: It didn't help me. I have done some edit on the question. Can you check it again? – Yax Apr 19 '15 at 12:18
  • Can you post your HTML it is a bit unclear what you want. – Michelangelo Apr 19 '15 at 12:18
  • add this code `&& container.find('textarea').val().length == 0` to the `if` condition – unloco Apr 19 '15 at 12:20

1 Answers1

1
$(document).mouseup(function (e){
    var container = $(".time-stamp, .full-name, .comment-box-wrapper.not-active .search-result");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // nor a descendant of the container
    {
        container.hide();
    }
});


$('.comment-box').on('change', function(){
    if(this.value!=""){
      $(this).parent().removeClass('not-active');
    }
})
vinayakj
  • 5,423
  • 3
  • 27
  • 47