Question

我正在使用jQuery插件进行通知toastr js（http://codeseven.github.io/toastr/），我正在尝试在通知气球中添加联系表单，并在提交时使用AJAX。即使表单在toastr.info('')之外工作，我也无法在脚本中实现。当我点击提交时，它会刷新页面。

我该如何解决这个问题？

Ajax脚本

$(function(){
    $("#contactform").submit(function(event){
        event.preventDefault();
        $.post('mailme.php', $("#contactform").serialize(), function(data) {

        });
    });
});

HTML表单

<form id="contactform" method="post" name="myform">
    <input name="phone" type="text"><input id="submit" name="Submit" type="submit" value="send">
</form>


toastr.info('I put the above HTML code in here')

小提琴

http://jsfiddle.net/e0k6e0vc/2

Answer 1

请尝试在结尾处取消绑定提交，如下所示：

$("#contactform").on('submit',function(event){
    event.preventDefault();
    $.post('mailme.php', $("#contactform").serialize(), function(data) {

    });
    $("#contactform").unbind('submit');
    return false;
});

<强>更新

好的..由于表单是动态添加的，因此无法识别提交事件，因此以下方法将完成工作：

<强> DEMO HERE

$(document).on('submit',"#contactform",function(event){
    event.preventDefault();
    $.post('mailme.php', $("#contactform").serialize(), function(data) {

    });
    $("#contactform").unbind('submit');
    return false;
});

如何在通知中添加AJAX提交表单而不重新加载页面？

1 个答案: