javascript - 如何在不重新加载页面的情况下在通知中添加 AJAX 提交表单？

Question

我正在使用通知toastrjs 的 jQuery 插件（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;
});

更新

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

在这里演示

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

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