单击按钮阻止表单提交

Question

我有一个代码段可以防止双击样式为按钮的链接。

        $('.btn').on('click', function(e) {

            if( $(this).prop('disabled') == true) {
                $(this).attr("href","javascript:void(0);");
            } 

            $(this).prop('disabled',true);

        });

我的问题是此代码似乎阻止了任何提交按钮提交表单。 这是上述代码中的预期行为吗？

Answer 1

似乎禁用按钮可以防止事件使DOM冒泡并触发提交。 有几种解决方法，但是最简单的方法可能是检查它是否为表单上的“提交”按钮，并手动进行处理，如下所示：

 $('.btn').on('click', function(e) { var trigger = $(this); if (trigger.prop('disabled') == true) { trigger.attr("href", "javascript:void(0);"); } trigger.prop('disabled', true); // disables form submit event bubbling if (trigger.is('[type="submit"], .submit')) { // check if submit button var form = trigger.closest("form, .form"); // find form if (form.length) { // if form exists form.submit(); // manually trigger form submit } } }); $("form").on("submit", function() { alert("submitting..."); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form style="border: 2px solid black; padding: 10px 0;"> Form: <input type="submit" class="btn" /> <button class="submit btn">.submit</button> </form> <br/> <button class="btn">Non-form button.btn</button> <input type="button" class="btn" value="non-form input.btn">