Question

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

首先我有一个基础html：

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

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

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来阅读，操作和提供信息，但我认为我的问题是在客户端，所以没有任何意义。我遇到的问题是当我按下＆＃39; x＆＃39;要删除，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 =＆＃34;按钮＆＃34; 属性添加到标记。然后是按钮的onClick（）事件，希望这会产生魔力。

建议2：

将 type =＆＃34;按钮＆＃34; 属性添加到标记。然后按下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/

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

1 个答案: