我想在点击某个div(“.checker”)后触发点击输入事件。换句话说,点击'.checker'将模拟点击复选框上的点击事件,远程检查它。
我写的代码可以工作,但click只有在第二次单击后才触发,第一次单击失败时才触发。这种情况甚至不会发生在'.checker'上,也会发生在checkbox上。
下面的所有HTML都包装在jquery折叠菜单中。单击“H3”后,“.sub-tree-wrap”折叠。“e.stoppropagation”用于防止冒泡,因为冒泡会导致菜单折叠。
jquery uniform的工作原理是:单击input(checkbox)会产生气泡,并在'.control_multi'-http://uniformjs.com/中切换span和div('.checker')上的类
在jsfiddle上可以工作,但不使用jquery Unform-http://jsfidle.net/mciastek/pqp9s/3/(thx标记S)
重要的是,我只能通过Javascript/jQuery来操作HTML。
HTML
<h3><div class='checker'></div></h3>
<div class='sub-tree-wrap'>
<div></div>
<div class='control_multi'>
<div>
<span>
<div class='checker'>
<span>
<input type='checkbox'>
</span>
</div>
</span>
</div>
</div>
</div>
</div>
Javascript/jQuery
$('h3 > .checker').click(function(e){
// prevent list collapse after click
e.stopPropagation();
$this = $(this);
// if has control_open or checkbox is disabled don't run multiple checking
var subTree = $this.parent().next();
if( (!subTree.hasClass('has-open')) && !($this.hasClass('disabled')) ) {
var inputCheck = $this.parent().next().find('.control_multi').find('input:checkbox')
inputCheck.trigger('click');
}
// toggle class .checked after click
$this.children('span').toggleClass('checked');
});
由于“.checkbox”
是元素,请使用触发器“focus”。
$('h3 > .checker').click(function(e){
// prevent list collapse after click
e.stopPropagation();
$this = $(this);
// if has control_open or checkbox is disabled don't run multiple checking
var subTree = $this.parent().next();
if( (!subTree.hasClass('has-open')) && !($this.hasClass('disabled')) ) {
var inputCheck = subTree.find('.control_multi .checkbox')
inputCheck.trigger('focus');
}
// toggle class .checked after click
$this.children('span').toggleClass('checked');
});
查看此jsfiddle