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

Question

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

0

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

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

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

Форма jquery работает так: щелчок на вкладке (флажок) пузырьков, и это переключает класс на span и div ('. Checker') в '.control_multi' - http://uniformjs.com/

На jsfiddle он работает, но без jquery unform - http://jsfiddle.net/mciastek/PQP9S/3/ (спасибо 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');
        });

mirox 29 нояб. 2013, в 00:16

Источник

2

Не могли бы вы воспроизвести его на jsfiddle.net?
zerkms 28 нояб. 2013, в 23:17
3

У вас есть имя класса, начинающееся с точки .checker поэтому ваш селектор jquery не будет работать. Также не помещайте блочные элементы (div) во встроенные элементы (span).
untitled 28 нояб. 2013, в 23:18
1

$this настроен как глобальная переменная, это ваше намерение?
carmina 29 нояб. 2013, в 00:04
0

Виноват. Вход имеет тип флажка, а не класс. Но в jsfiddle это работает jsfiddle.net/mciastek/PQP9S/3 ( спасибо Марк S). Проблема в том, что флажки стилизованы с помощью jQueryiformiformjs.com . Может в этом проблема.
mirox 29 нояб. 2013, в 07:57
0

После некоторого исследования я почти на 100% уверен, что проблема в форме jquery, и это вызов по событию. Кто-нибудь знает, как это изменить / изменить, чтобы не сломать мой код?
mirox 29 нояб. 2013, в 20:11
0

Проблема была решена путем добавления $ .uniform.update, который обновляет входные классы из-за манипуляций с классами в моем скрипте. Проверьте униформуjs.com/#docs
mirox 07 дек. 2013, в 16:21

Показать ещё 4 комментария

Теги:

javascript

jquery

html

click

events

1 ответ

Ещё вопросы

Не могли бы вы воспроизвести его на jsfiddle.net?
У вас есть имя класса, начинающееся с точки .checker поэтому ваш селектор jquery не будет работать. Также не помещайте блочные элементы (div) во встроенные элементы (span).
$this настроен как глобальная переменная, это ваше намерение?
Виноват. Вход имеет тип флажка, а не класс. Но в jsfiddle это работает jsfiddle.net/mciastek/PQP9S/3 ( спасибо Марк S). Проблема в том, что флажки стилизованы с помощью jQueryiformiformjs.com . Может в этом проблема.
После некоторого исследования я почти на 100% уверен, что проблема в форме jquery, и это вызов по событию. Кто-нибудь знает, как это изменить / изменить, чтобы не сломать мой код?
Проблема была решена путем добавления $ .uniform.update, который обновляет входные классы из-за манипуляций с классами в моем скрипте. Проверьте униформуjs.com/#docs

Mark S · Answer 1 · 2013-11-29T04-51-00.000Z

Поскольку '.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