首次點擊不會觸發事件

Question

我想在單擊某些div（'.checker'）后觸發輸入的click事件。 換句話說，單擊“ .checker”會模擬復選框上的單擊事件，並對其進行遠程檢查。

我編寫的代碼有效，但是單擊僅在第二次單擊后才觸發，但第一次失敗。 這不僅發生在“ .checker”上，而且也發生在復選框上。

下面的所有HTML都封裝在jquery折疊菜單中。 單擊“ h3”后，“。sub-tree-wrap”折疊。 “ e.stopPropagation”用於防止起泡，這會導致菜單崩潰。

jQuery制服的工作原理是：單擊輸入（復選框）氣泡，然后在“ .control_multi”中的span和div（'。checker'）中切換類-http: //uniformjs.com/

在jsfiddle上可以使用，但不會出現jquery格式不正確-http: //jsfiddle.net/mciastek/PQP9S/3/ （thx Mark 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'是<input>元素，因此請使用觸發器'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