WORK

체크박스 스크립트 작성시 라벨에 이벤트 위임 X

포부리 2019. 12. 16. 16:42

왜?

체크 박스의 체크 여부에 따라 show, hide해줘야하는 스크립트를 작성하고 있었는데
이벤트를 label에 걸었다.
label에는 이미 checkbox가 트리거 되어 있었기 때문에 빠르게 클릭시 제대로 이벤트가 위임되지 않는 현상이 발생하였다.

// label -> input
$(".receipt-box .checklist-01 input").on("click", function() {
    var _checked = $(this).prop("checked");
    _checked
      ? $(this)
          .closest(".receipt-box")
          .find("td")
          .css("display", "block")
      : $(this)
          .closest(".receipt-box")
          .find("td")
          .hide();
  });