javascript - 意外的 JavaScript (jQuery) 行为(函数调用，而不是表单提交)

Question

好吧，我不明白。

我有一个特定类型的表单声明，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，不用担心。

Answer 1

按钮的默认类型是提交，所以当您在文本框中按回车键时，就像单击第一个按钮一样。尝试:

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