html - 为什么 button[type="submit"] 只能作为表单的直接子级工作

Question

如果我<button type="submit" ..>在表单中写一个，一旦按下按钮，表单就会提交。

现在我想要，但按钮不是直接的孩子，但不起作用

<div class="form-component">
    <div class="form-header">
        <!-- ... -->
    </div>
    <div class="form-content">
        <form method="post">
            <div class="form-element"> <!-- ... --></div>
            <div class="form-actions">
               <button type="submit">Save</button>
            </div>
        </form>
    </div>
</div>

Answer 1

它确实有效。请参阅http://jsfiddle.net/kJtMG/ 您很可能在您评论的部分中的某处有无效的 HTML。

<div class="form-element"> <!-- ... --></div>

Answer 2

如果inputtypesubmit是您的表单的子表单，则只需单击按钮即可提交表单。像这样 ：

<form method="post">
        <div class="form-element"> <!-- ... --></div>
        <div class="form-actions">
           <button type="submit">Save</button>
        </div>
    </form>

如果没有，您可以通过以下方式强制提交表单javascript/jquery：

<form method="post">
    <div class="form-element"> <!-- ... --></div>
</form>

<div class="form-actions">
    <button type="submit">Save</button>
</div>

jQuery：

$('button[type="submit"]').on('click', function(e){
    $(this).prev('form').submit();
});

或者这个（使用表单id）：

$('button[type="submit"]').on('click', function(e){
    $('#form_id').submit();
});