Первый щелчок не вызывает событие

Question

Я хочу вызвать событие click на входе после нажатия на определенный div ('.checker'). Другими словами, нажатие на «.checker» имитирует событие click on on checkbox, проверяя его удаленно.

Код, который я написал, работает, но вызывает триггеры только после второго щелчка, при первом сбой. Это происходит не только с «.checker», но также и с флажком.

Весь этот HTML-код обернут в меню сглаживания jquery. После нажатия на «h3» «.sub-tree-wrap» происходит сбой. «E.stopPropagation» - это предотвращение пузырьков, которые вызывают крах меню.

JQuery равномерная работает, что: нажав на входе (галочка) пузырьков, и это переключает класс на пролете и DIV в «.control_multi„- http://uniformjs.com/

На jsfiddle это работает, но без JQuery (“шашку.») unform - http://jsfiddle.net/mciastek/PQP9S/3/ (thx Mark S)

Что важно, я могу манипулировать HTML только Javascript/jQuery.

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