第一次单击不会触发事件

Question

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

Answer 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