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="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()，在调试代码的时候会发现页面会多次刷新，第一次是带查询条件刷新，后面的都是不带查询条件刷新