Почему атрибут «флажок» флажка возвращает значение, противоположное его фактическому значению при событии щелчка? - PullRequest
Новая
       6

Почему атрибут «флажок» флажка возвращает значение, противоположное его фактическому значению при событии щелчка?

3 голосов
/ 02 апреля 2010

У меня есть следующий HTML 

<li><input type="checkbox" /><label>This is the label!</label></li>

Я привязал событие click к li и позволил событию click всплыть на li, прежде чем делать что-либо еще. 

$('li').each(function(i){
  var item = $(this);
  var checkbox = $("input[type='checkbox']", item);

  item.bind('click', function(e){
    var isChecked = checkbox.is(':checked');
    console.log(isChecked);
    e.stopPropagation();
  });
});

Начиная с не отмеченного флажка, когда срабатывает событие click, isChecked возвращает true, когда я нажимаю на флажок, но возвращает false, когда я нажимаю на ярлык или li. Кто-нибудь знает почему?

[EDIT:] Чтобы продемонстрировать проблему, взгляните на это http://jsfiddle.net/nYbf6/2/.

  1. Нажмите на флажок в первом окне.
  2. Щелкните внутри второго li, но не на ярлыке или флажке.

Обратите внимание, что вы никогда не можете переключать флажок, нажимая на флажок, потому что атрибут 'флажок' всегда возвращает то, чем он не является, нажимая флажок.

[EDIT:] Нашел здесь ответ сегодня: http://www.bennadel.com/blog/1525-jQuery-s-Event-Triggering-Order-Of-Default-Behavior-And-triggerHandler-.htm. Мне не нравится решение, но оно лучше, чем никакого решения.

Ответы [ 3 ]

2 голосов
/ 02 апреля 2010

событие щелчка флажка срабатывает до изменения значения. Таким образом, если вы возвращаете false при переопределении события click, флажок не может изменить свое значение. Вы должны изменить событие, чтобы оно срабатывало при нажатии на флажок, а не на тот, в котором он содержится.

1 голос
/ 02 апреля 2010

Попробуйте это: 

<li>
  <input type='checkbox' value='foo' id='myFavoriteCheckbox'>
  <label for='myFavoriteCheckbox'>The Label</label>
</li>

Теперь, когда вы нажимаете на ярлык, флажок будет изменен. Свяжите обработчик с флажком и отметьте .attr('checked'), и вы обнаружите, что даже при событиях click значение флажка будет правильным. Также обратите внимание, что это верно , даже если вы решите остановить распространение и запретить событие по умолчанию . Другими словами, если вы обрабатываете событие click и решаете предотвратить действие по умолчанию, ваш обработчик все равно увидит значение «флажка», установленное на то, что было бы, если бы вы сделали не остановить действие по умолчанию.

1 голос
/ 02 апреля 2010

Лучше выбрать соответствующий флажок как часть click, например: 

$('li').click(function(e) {
  var isChecked = $(':checkbox:checked', this).length > 0;
  console.log(isChecked);
  e.stopPropagation();
});

Это находит флажок в <li>, который был нажат, когда он был нажат.

Что касается части , почему , если вы нажимаете на флажок, вы устанавливаете его в значение true, затем событие распространяется на li, который определяет, что флажок действительно установлен. Если флажок снят, если вы нажимаете на ярлык, флажок не устанавливается, поэтому он по-прежнему ложен. Если вы установили флажок , тогда щелкнул ярлык, вы увидите, что true возвращается, потому что теперь он отмечен.

Если вы ожидаете, что метка поставит флажок, вам нужно связать его, используя атрибут for метки, например: 

<li>
  <input id="myInput" type="checkbox" />
  <label for="myInput">This is the label!</label>
</li>

Затем браузер обработает соединение, щелкнув метку, отметим флажок.

...