如何在通知內添加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')

小提琴

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

好的。由於表單是動態添加的，因此無法識別Submit事件，因此下面的方法可以完成工作：

此處演示

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

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