jQuery to Toggle a form in a div, prevent hiding when clicking on inputs

Question

Sorry if this has been asked, I am not sure how to best word it so I couldn't find a result on Google.

I currently have a div #divForm with some text and a table that has a form inside. I currently have it so when you click on the div it toggles to show the table:

$("#divForm").live('click', function () {
            $(this).attr('class', 'closeForm');
            $(this).find("table.formTable").slideDown();
        });

The code that hides the div is as follows:

$(".closeForm").live ('click', function () {
            $(this).attr('id', 'divForm');
            $(this).find("table.formTable").slideUp();
        });

This works. However, because there are inputs in the table/form, which is inside the div, clicking on the inputs to enter information causes the table to hide.

What is the best way to have it so the table/forms hides when clicking anywhere in the div EXCEPT when clicking on an input?

Answer 1

I'm not sure I completely understand your layout, but if .closeForm is the click target you could check the actual event target using .is() and :input like this:

$(".closeForm").live('click', function (e) {
  if($(e.target).is(":input")) return;
  $(this).attr('id', 'divForm');
  $(this).find("table.formTable").slideUp();
});