如何在通知中添加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; 
});