jQuery的 .on()和 .one()

ajax請求成功，頁面彈出模態框，提示操作成功，幾秒后自動消失，頁面刷新。模態框大致效果：

模態框代碼：

<style>
　　#successModal { margin: 120px 0 0 340px;}
　　#successModal{
　　　　z-index:1000000; //z-index 屬性設置元素的堆疊順序。此處為了讓該模態框不被遮蓋，所以值設得比較大
　　}
</style>
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
　　<div class="modal-dialog">
　　　　<div class="modal-content" style="width:200px;height:50px;">
　　　　　　<p style="text-align:center;margin-top:10px;font-size:16px;">操作成功</p>
　　　　</div>
　　</div>
</div>
<script type="text/javascript">
function successModalShow() {    
    $('#successModal').modal('show');
    $('#successModal').one('shown.bs.modal', function () {
        setTimeout(function(){$("#successModal").modal("hide")},1000);
    })
}
</script

JS代碼：

$.ajax({ 
　　type        : "POST"
　　,url         : url
　　,data        : data
　　,contentType : "application/x-www-form-urlencoded;charset=utf-8;"
　　,dataType    : "text"
　　,cache          : false
　　,success: function(str) {
　　　　var info = eval('(' + str + ')');
　　　　if (info.code == 1) {
　　　　　　successModalShow();
　　　　　　//當模態框調用 hide 實例方法時刷新頁面，此處為帶查詢條件刷新
　　　　　　$('#successModal').on('hide.bs.modal', function () {
　　　　　　　　$('#queryform')[0].submit();
　　　　　　}); 
　　　　}
　　　　else {
　　　　　　alert(info.msg);
　　　　}
　　}
　　,error : function(XMLHttpRequest, textStatus, errorThrown) {
　　　　alert(XMLHttpRequest.status + textStatus);
　　}
});

我舉這個例子主要是想說明jQuery的.on()方法和.one()方法的區別：

　　jQuery 提供的.on()方法，綁定事件后並不是自動移除事件的，需要通過.off()來手工移除。

　　jQuery 提供的.one()方法，綁定元素執行完畢后自動移除事件，可以方法僅觸發一次的事件。

　　如果頁面是局部刷新，並且每次刷新頁面ajax請求成功都是一樣的操作先彈出模態框然后刷新，那么就要用.one()

$('#successModal').one('hide.bs.modal', function () {
　　$('#queryform')[0].submit();
}); 

　　因為當使用 one() 方法時，每個元素只能運行一次事件處理器函數，也就是說只會執行一次刷新操作。如果用.on()，在調試代碼的時候會發現頁面會多次刷新，第一次是帶查詢條件刷新，后面的都是不帶查詢條件刷新