提问者:小点点

第一次单击不会触发事件


我想在点击某个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');
        });

共1个答案

匿名用户

由于“.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