jquery - How to prevent form submission when submit event is handled using .on() method

Question

I have a form inside of a page that uses jQuery Mobile.

It's just a good ol' form, nothing fancy:

<form action="index.php" method="post">
    <input type="text" name="owner" id="owner" />
    <button type="submit">Add</button>
</form>

If I add following to a script block (note: enclosing $(function(){}); is omitted for clarity):

$('form').submit(function(event){
    // event.preventDefault(); doesn't work here?!?
    return false;
});

...form will not be submitted, no matter what. However, this approach can not be used with jQuery Mobile, because after page is changed, event binding will not be applied when DOM is changed.

So, if I try this approach instead:

$(document).on('submit', 'form', function(event){
    // event.preventDefault(); doesn't work here as well...
    alert('submit!');
    return false;
});

...Form WILL be submitted, even though it returns false (and there is alert when button is clicked).

What's going on here, and how to get expected behavior?

Answer 1

不要将处理程序附加到表单，而是为提交按钮执行此操作。

event.preventDefault()

肯定会阻止表单提交，一旦您完成验证（或在表单提交之前您希望执行的任何操作），您可以使用触发表单提交

$('#target').submit();