Почему я не могу представить свою форму?

Question

У меня есть модальное всплывающее окно, которое я хочу скрыть, когда нажимается «тень», но не при нажатии на содержимое. Для этого у меня есть:

$('#shade').click(function(){ 
    $('#shade').fadeOut(); 
}).children().click(function(e){ 
    return false; 
}); 

Проблема в том, у меня есть форма внутри, что я хочу представить, и этот код предотвращает форму от представления, поэтому у меня есть:

$('#shade-form-submit').click(function(){ 
    document.getElementById('shade-form').submit(); 
}); 

Однако это результаты в следующей ошибке в консоли:

[13:07:21.145] TypeError: document.getElementById(...).submit is not a function @ ... 

Что происходит? Для справки, мой <form> тег:

<form action='.' method='post' id='shade-form'> 
    <div> 
    <input type='text' /> 
    </div> 
    <div> 
    <div> 
     <input type='submit' /> 
    </div> 
    </div> 
</form> 

Answer 1

Вы должны исключить форму входа из обработчика щелчка у вас есть на children():

$('#shade') 
    .click(function(){ 
     $('#shade').fadeOut(); 
    }) 
    .children().not(':input').click(function(e){ 
     return false; 
    });