意外的 JavaScript (jQuery) 行为（函数调用，而不是表单提交）答案

【问题标题】：Unexpected JavaScript (jQuery) Behavior (Function call, rather than Form submit)意外的 JavaScript (jQuery) 行为（函数调用，而不是表单提交）
【发布时间】：2014-12-01 09:51:56
【问题描述】：

好的，我不明白。

我有一个特定类型的表单声明，jQuery 将始终处理表单数据并发送一个 Ajax 请求，但在表单内部，我有按钮，一次用于表单提交 (Ajax)，一次用于调用特定函数.像这样：

<button data-click="regenUSID">Regenerate</button>

在 jQuery 中都是这样调用的：

$(function() {
    $('form.ajax').submit(function(event) {
        event.preventDefault();
        var data = $(this).serializeArray();
        // do stuff with data       
    });

    $('[data-click]').click(function(event) {
        // prevents form submit
        event.preventDefault();
        // calls defined function and passes element that got clicked on
        window[$(this).attr('data-click')](this);
    });
});

现在奇怪的是，如果我单击数据单击按钮，它可以工作，如果我单击预期的提交按钮，它也可以工作，但是如果我在表单中有一个正常的输入文本字段并按回车键， “提交”表单，它执行表单中第一个按钮的任何操作，结论，如果表单提交按钮在数据点击按钮之前，一切正常，但如果数据点击按钮在提交按钮之前（就是这样！），数据点击函数将被调用。

解决此问题的一种方法是使用隐藏的提交按钮启动表单，尽管这会破坏 HTML。

总而言之，它可以是这样的：

<form class="ajax" action="/formhandler.php?register" method="POST" role="form">
    <div class="usidrecommendation">
        <?php $usid = Server::generateUnusedUSID(); ?>
        <h1 class="text-center"><?php echo $usid; ?></h1>
    </div>
    <button data-click="regenUSID">Regenerate</button>

    <input type="password" name="password" id="password" placeholder="enter Password here">

    <button class="btn btn-primary btn-block btn-submit">Check data</button>
</form>

<script>

function regenUSID(from) {
    // do stuff
    console.log(from);
}

$(function() {
    $('form.ajax').submit(function(event) {
        event.preventDefault();
        var data = $(this).serializeArray();
        // do stuff with data
    });

    $('[data-click]').click(function(event) {
        // prevents form submit
        event.preventDefault();
        // calls defined function and passes element that got clicked on
        window[$(this).attr('data-click')](this);
    })
});
</script>

请注意，每个带有 ajax 类的表单都不应该“按原样”提交，它总是必须进行 ajax 提交并通过 JavaScript。客户端始终启用 JavaScript，不用担心。

【问题讨论】：

这不是你要找的，为特定按钮设置类型，例如：<button type="button" data-click="regenUSID">Regenerate</button>
天哪，哇，我从来没想过。成功了，谢谢！

标签： javascript jquery ajax forms

【解决方案1】：

按钮的默认类型是submit，因此当您在文本框中按 Enter 时，就像单击第一个按钮一样。试试：

 <button data-click="regenUSID" type="button">Regenerate</button>

【讨论】：