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

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')

Fiddle

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 提交表单？

How to add a AJAX submit form inside a notification without reloading the page?

html

javascript

ajax

jquery

toastr