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

Question

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

我该如何解决这个问题？

阿贾克斯脚本

$(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; 
}); 

UPDATE

好吧。既然是动态获取添加的形式，它并没有确定提交事件，因此下面的方法将做的工作：

DEMO HERE

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

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