Jquery Event Bubbling CheckBox

Question

У меня есть форма с флажками, а затем текст справа от флажка. Есть события jquery, прикрепленные к событиям щелчка флажка. Я хочу, чтобы пользователь мог щелкнуть метку или флажок и установить / снять флажок, а также событие, которое нужно запустить. Ниже приведена упрощенная версия того, что я пытаюсь сделать ( НЕ запустите код, как показано ниже, поскольку он создает бесконечный цикл).

<script>
$(document).ready(function() {
  $("form p").click(function() {
    $(this).find("input").click();
  });

  $("form input").click(function() {
    alert("clicked");
  });  
});
</script>


<form>
<p> <input type="checkbox" name="checker" value="1" /> Click anywhere</p>
<p> <input type="checkbox" name="checker2" value="2" /> Click anywhere</p>
</form>

Answer 1

Используйте метку LABEL: http://www.w3schools.com/tags/tag_label.asp

Answer 2

Нажатие

на любом теге <input> вызывает событие click тега <p> (поскольку тег <input> находится внутри тега <p>), которое затем вызывает событие click тега <input>, ведущее к бесконечному циклу.

Answer 3

Вы можете предотвратить «бесконечный цикл», используя метод j.superPropagation jQuery .