为什么我不能提交表格？

Question

I have a modal popup, that I want to hide when the 'shade' is clicked, but not when the contents are clicked. For this purpose I have:

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

The problem is I have a form inside that I want to submit, and this code prevents the form from submitting, so I have:

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

However this results in the following error in the console:

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

What's going on? For reference, my <form> tag:

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

Answer 1

You need to exclude form inputs from the click handler you have on children() :

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