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 whe开发者_StackOverflown clicking anywhere in the div EXCEPT when clicking on an input?
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();
});
精彩评论