Javascript 表单操作在使用 onsubmission 事件确认之前执行

Question

我试图在删除 <div> 时添加确认框使用<form onsubmission=return confirm("Please confirm");">就像这样thread ，但是在我看到确认对话框之前，附加到我的表单的操作就被执行了。 <div>动态生成，表单基本上使用 Python/Flask 删除 csv 行，以便在修改后使用 JQuery/Javascript 读回。我的代码看起来或多或少像这样。

首先我有一个基本的 html:

<div class="container">
    <div id="projects"></div>
</div>

然后我使用 javascript 附加多个 <div>动态使用通过 Python/Flask 服务器从 csv 读取的信息:

var ProjName = {{ ProjName|safe }};    
$(document).ready(function(){
    for(i = 0; i < {{ row_count|safe }}; i++) {
        $('#projects').append('<div class="projectDivs" id="'+ i +'"><form onsubmit="return confirm("Do you really want to submit the form?");" action="/dashboard" method="post"><input type="hidden" name="hidden-value" value="'+i+'"><button value="delete" name="submit" class="close">×</button></form><center><h2>'+ ProjName[i] + '</h2></center></div>');
    }
});

在后台，我使用 Python/Flask 来读取、操作和提供信息，但我认为我的问题出在客户端，所以没有必要显示这一点。我遇到的问题是，当我按“x”删除时，div 在显示对话框之前被删除......任何帮助将非常受欢迎。

Answer 1

您需要使用event.preventDefault()函数。尝试将您的代码更改为以下代码并查看它是否有效:

var ProjName = {{ ProjName|safe }}; 
$(document).ready(function(e) {

e.preventDefault();

for(i = 0; i < {{ row_count|safe }}; i++) {
    $('#projects').append('<div class="projectDivs" id="'+ i +'"><form onsubmit="return confirm("Do you really want to submit the form?");" action="/dashboard" method="post"><input type="hidden" name="hidden-value" value="'+i+'"><button value="delete" name="submit" class="close">×</button></form><center><h2>'+ ProjName[i] + '</h2></center></div>');

  }
});

仅供引用，如果上述方法不起作用，您可以使用以下语法:

对于 JavaScript:

window.addEventListener('keydown', function(e) {
    e.preventDefault();
   /* all your code goes here */
}, true);

对于 jQuery

$(document).on('submit', 'form', function(e) {
    e.preventDefault();
   /* all your code goes here */
});

============================================== ==

更新:

============================================== ==

好的。我再次看到您的代码，也许您可​​以忽略我上面对 e.preventDefault() 的建议。而是尝试这个:

建议1:

将 type="button" 属性添加到您的 标记中。然后是按钮的 onClick() 事件，希望这能发挥魔力。

建议2:

将 type="button" 属性添加到您的 标记中。然后按钮的onClick()事件，使用ajax删除csv文件。

您的代码应如下所示。抱歉没有机会测试下面的代码。如果您遇到错误并需要帮助，请随时联系我。

`
$(function() {
    $('button').click(function() {
        var hiddenFieldValue = $("input[value='hidden-value']");
        $.ajax({
            url: '/dashboard',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});


var ProjName = {{ ProjName|safe }};    
$(document).ready(function(){
    for(i = 0; i < {{ row_count|safe }}; i++) {
        $('#projects').append('
            <div class="projectDivs" id="'+ i +'">
                <form method="post">
                    <input type="hidden" name="hidden-value" value="'+i+'">
                    <button type="button" value="delete" name="submit" class="close">×</button>
                </form>
                <center><h2>+ProjName[i]+</h2></center>
            </div>
        ');
    }
});
`

这里有一篇关于在 Python 和 Flask 中使用 jQuery Ajax 的好文章: http://codehandbook.org/python-flask-jquery-ajax-post/