jquery函数中触发了多个事件
jquery函数中触发了多个事件
提问于 2016-01-27 01:16:31
我有html网格表组成的评论链接，在每个row.Clicking上的任何一个打开一个引导模式与文本框和保存button.So我写了一个库组成的函数与评论system.Below是基本代码。
HTML：
<td><a class="addComment" data-notedate="somevalue" data-toggle='modal' href='#addnotesdiv' data-oprid="somevalue" data-soid="somevalue" data-type="1"><i class="fa fa-comments-o fa-2"></i></a></td> ..... nJS：
var Inventory={};
Inventory.notes={
defaults:{
type:'1',
soid:0,
operator_id:0,
date:'',
target:'div#addnotesdiv',
},
init:function()
{
var self=this;
$('div#addnotesdiv').on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
},
getandsetdefaults:function(e)
{
this.defaults.soid = $(e.relatedTarget).data('soid');
this.defaults.operator_id=$(e.relatedTarget).data('oprid');
this.defaults.type=$(e.relatedTarget).data('type');
this.defaults.date=$(e.relatedTarget).data('notedate');
},
setmodalelements:function(e)
{
$(e.currentTarget).find('#notesthread').empty();
$(e.currentTarget).find('input#inpnotesoid').val(this.defaults.soid);
$(e.currentTarget).find('input#inpnoteoprid').val(this.defaults.operator_id);
$(e.currentTarget).find('input#inpnotetype').val(this.defaults.type);
},
addnote:function()
{
var self=this;
$('button#btnaddnote').on('click',function(){
var message=$(self.defaults.target).find('textarea#addnotemsg').val();
var soid=$(self.defaults.target).find('input[type=hidden][id=inpnotesoid]').val();
var note_date=$(self.defaults.target).find('input#addnotedate').val();
var oprid=$(self.defaults.target).find('input[type=hidden][id=inpnoteoprid]').val();
var type=$(self.defaults.target).find('input[type=hidden][id=inpnotetype]').val();
if(message=="" || soid=="" || note_date=="")
{
alert("Fill all details");
return;
}
var savenote=$.post(HOST+'notes/save',{message:message,soid:soid,note_date:note_date,type:type,operator_id:oprid});
savenote.done(function(res){
res=$.parseJSON(res);
if(res.status && res.error){
alert(res.message);
return;
}
if(res.status && res.type)
{
$('div#addnotemsg').showSuccess("Done").done(function(){self.getNotes();});
$('div#addnotesdiv').find('textarea#addnotemsg').val('');
}
else
{
$('div#addnotemsg').showFailure("Error");
}
});
});
},
getNotes:function()
{
$('button#btnrefreshcomments i').addClass('glyphicon-refresh-animate');
var getnotes=$.getJSON(HOST,{soid:this.defaults.soid,type:this.defaults.type,note_date:this.defaults.date,operator_id:this.defaults.operator_id});
getnotes.done(function(res){
if(res.status && res.data.length)
{
--somecode---
}
});
},
activaterefresh:function(){
var self=this;
$(document).on('click','#btnrefreshcomments',function(){
$('#notesthread').empty();
self.getNotes();
return false;
});
return false;
}
}为了在该页面上激活此功能，我写道
Inventory.notes.init();当我打开一次模式时，上面的代码工作得很好，但当我关闭相同的模式并再次打开它时，通过单击不同的链接，所有事件都会激发两次，三次，因此激发的事件的on.Number等于在该页面上打开模式的次数。执行相同任务的代码或任何其他方式中是否有任何错误。
我知道这不是一个插件，所有我想要的是将所有与评论系统相关的功能存储在一个屋檐下作为库。
回答 2
Stack Overflow用户
发布于 2016-01-27 01:49:21
每次打开模式框时，都会触发show.bs.modal事件，然后再次执行所有方法，包括事件绑定。例如addnote中的事件绑定
$('div#addnotesdiv').on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});Stack Overflow用户
发布于 2016-01-27 16:36:57
问题是，当模式显示时，getNotes，addnote，activatereferesh函数被调用，但当模式再次被重新打开时，这个函数被再次调用，所以这是两次，所以以更简单的方式on.Putting它是有多个侦听器附加到单个元素，而不是破坏之前的一个，因为我的初始化函数被调用了很多次。
最后有两个解决方案，我需要从here中解除事件绑定或者只附加once.Got idea
1)使用以下代码修改了Init函数，增加了一个未绑定的监听器函数
init:function(selector)
{
var self=this;
$(self.defaults.target).on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
$(self.defaults.target).on('hide.bs.modal',function(e){
self.unbindlistners();
});
}
unbindlistners:function()
{
var self=this;
$('#btnrefreshcomments').unbind('click');
$('button#btnaddnote').unbind('click');
return false;
}
}2)将事件绑定函数放在show.bs.modal外部
init:function(selector)
{
var self=this;
$(self.defaults.target).on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
});
self.getNotes();
self.addnote();
self.activaterefresh();
}在第二种解决方案中有一个小问题，即第一次加载DOM函数时，使用默认值调用getNotes函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35019789
复制相关文章
相似问题
腾讯云开发者
