与Remodal配对后，iCheck事件多次触发
[英]iCheck event fired many times after pairing with Remodal
问题描述
我目前正在使用：
- remodalJS 0.6.4
- iCheckJS 1.0.2
UX的设计使iCheck复选框和单选框充当过滤器，并存在于重新设计中。 当我将两个库配对使用时，发生了奇怪的事情：
这是Chrome的控制台输出，
选中某个选项（通过单选或复选框）时，将
ifChecked触发ifChecked。
<html>
<head>
<link rel="stylesheet" href="bower_components/remodal/dist/jquery.remodal.css">
<link rel="stylesheet" href="bower_components/iCheck/skins/line/green.css">
</head>
<body>
<h1 data-remodal-target="test-icheck-remodal"> Animal</h1>
<h1 data-remodal-target="test-icheck-remodal-2"> Comics</h1>
<div class="remodal" data-remodal-id="test-icheck-remodal">
<h2>Choose Animal</h2>
<input type="checkbox" value="">
<label>Cat</label>
<input type="checkbox" value="">
<label>Dog</label>
</div>
<div class="remodal" data-remodal-id="test-icheck-remodal-2">
<h2>Choose Comics</h2>
<input type="checkbox" value="">
<label>Batman</label>
<input type="checkbox" value="">
<label>Superman</label>
</div>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/remodal/dist/jquery.remodal.js"></script>
<script type="text/javascript" src="bower_components/iCheck/icheck.js"></script>
<script type="text/javascript">
$('input:checkbox, input:radio').each(function() {
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-green',
radioClass: 'iradio_line-green',
insert: '<div class="icheck_line-icon"></div>' + label_text
})
});
var flag = false;
$(document).on('open', '.remodal', function(e) {
var $this = $(this);
var inputFields = $this.find('input:checkbox, input:radio');
console.log('remodal Opened');
if(!flag) {
inputFields.on('ifChecked', function(event) {
console.log('ifChecked called');
});
flag = true;
}
});
</script>
</body>
</html>
对应的bower.json
{
"name": "remodal_icheck",
"version": "0.0.0",
"dependencies": {
"remodal": "0.6.4",
"iCheck": "1.0.2"
},
"devDependencies": {
}
}
1 个解决方案
解决方案1
1 已采纳 2015-05-04 17:00:38
我认为这里的问题是，每次模态打开时，您都将绑定事件。 我可以想到几种修复方法，但是我不确定这是否是解决问题的最佳方法。
我的第一个解决方案：创建一个标志，当您绑定事件时将该标志设置为true，因此当它再次出现时将不再绑定它。
// the flag
var flag = false;
$(document).on('open', '.remodal', function(e) {
var $this = $(this);
var elementId = $this.attr('data-remodal-id');
var inputFields = $this.find('input:checkbox, input:radio');
var queryParam = $this.attr('data-query-param');
console.log('remodal Opened');
// check flag if false
if(!flag) {
/* If it's radio, Close the remodal after selecting options */
inputFields.on('ifChecked', function(event) {
queryObject[queryParam] = 'hihi';
console.log('ifChecked called');
if ($this.has('input:checkbox').length == 0) {
$this.remodal().close();
}
});
/* Todo: move to function clearFilters() */
$this.find('.remodal-filter-clear').on('click', function() {
inputFields.iCheck('uncheck');
});
flag = true;
}
});
更新
根据下面的评论添加第二个解决方案，其中包含两个.remodal类。
我们向已经绑定到该事件的那些输入元素添加一个类。
对于此示例，我们将该类名称称为bound 。
$(document).on('open', '.remodal', function(e) {
var $this = $(this);
var elementId = $this.attr('data-remodal-id');
// find input elements which don't have the `.bound` class, then add class
var inputFields = $this.find('input:checkbox:not(.bound), input:radio:not(.bound)').addClass("bound");
var queryParam = $this.attr('data-query-param');
console.log('remodal Opened');
/* If it's radio, Close the remodal after selecting options */
if(inputFields.length > 0) {
inputFields.on('ifChecked', function(event) {
queryObject[queryParam] = 'hihi';
console.log('ifChecked called');
if ($this.has('input:checkbox').length == 0) {
$this.remodal().close();
}
});
/* Todo: move to function clearFilters() */
$this.find('.remodal-filter-clear').on('click', function() {
inputFields.iCheck('uncheck');
});
}
});
骨干事件多次被解雇
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.