Question

我有问题。我认为这是因为渲染，但我不知道，因为这个话题对我来说是新的。

好的，我有一个简单的表格：

$result = [];
foreach($array as $v)
{
  $result[$v['customer_email'] . $v['customer_mobile']] = $v;
}

现在我想使用jQuery捕获提交，如：

<form method="post" action="/send-mail">
<input type="text" name="msg" value="">
<input type="submit" value="send that fancy mail">
</form>

好的，那段代码非常好用。它做它应该做的事情。但是，如果我想发送第二个请求，则提交按钮不再按预期工作。它试图使用默认动作发送表单，虽然我很喜欢 - 至少这是我的想法。

我确实使用谷歌，但我甚至不知道如何解释我的问题。

希望有人可以帮助我，非常感谢！

格尔茨

Answer 1

您可以使用：

代替 .html（）

.clone(true)：创建匹配元素集的深层副本。

.replaceWith()：用提供的新内容替换匹配元素集中的每个元素，并返回已删除的元素集。

如果附加到提交按钮，则事件必须单击;如果附加到表单，则提交。

摘录：

$('[type=submit]').on('click', function (e) {
    e.preventDefault();
    var formHtml = $(this).closest('form').clone(true);
    $.ajax({
        dataType: "json",
        url: 'https://api.github.com/repos/octocat/Hello-World',
        beforeSend: function (xhr) {
            $('form').html("sending mail");
        },
        success: function (data) {
            console.log('Success');
            $('form').replaceWith(formHtml); // I think here's the problem...
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form method="post" action="/send-mail">
    <input type="text" name="msg" value="">
    <input type="submit" value="send that fancy mail">
</form>

Answer 2

使用$(document).on("click", "[type=submit]", function (e) {代替$('[type=submit]').submit(function(e) {

动态创建的元素

Answer 3

使用<input type="button">代替<input type="submit">并添加onclick这样的功能：

<input type="button" onclick="_submitForm()" value="send that fancy mail">

然后你的js将是：

function _submitForm(){
var formHtml = $(this).parent().html();

    $.ajax({
        ..all these options..,
        beforeSend: function(xhr) {
            $('form').html("sending mail");
        },
        success: function(data) {
            $('form').html(formHtml); // I think here's the problem...
        }     
    });
}

我希望这能解决你的问题。

使用提交按钮的JavaScript jQuery问题

3 个答案: