더블 클릭 시 양식을 표시하지만 양식의 더블 클릭 이벤트를 트리거하지 않는 jQuery 이벤트를 생성하려면 어떻게 해야 합니까?

Question

사용자가 표 셀을 두 번 클릭하면 해당 셀이 HTML 형식으로 업데이트되는 이벤트를 작성하고 싶습니다. 양식이 표시될 때 두 번 클릭 이벤트가 작동하는 것을 원하지 않습니다. 사용자가 취소 버튼을 눌러 양식을 취소하거나 제출 버튼을 눌러 양식을 제출하면 테이블 셀이 각각 원래 값 또는 업데이트된 값으로 업데이트되어야 하며 두 번 클릭 이벤트가 다시 작동해야 합니다.

이 기능을 어떻게 구현하나요?

현재 코드입니다. "click me"를 두 번 클릭하면 양식이 나타나는 것을 볼 수 있습니다. 양식을 다시 두 번 클릭하면 양식이 표시되는 동안 두 번 클릭 이벤트가 계속 발생하므로 양식이 다시 업데이트되는 것을 볼 수 있습니다.

HTML 양식을 표시하지 않고 내 셀에 값이 표시될 때만 두 번 클릭 이벤트를 트리거하려면 어떻게 해야 합니까?

명확히 말하자면 이것은 단일 부동 소수점 값을 저장하는 셀입니다. 먼저 값을 두 번 클릭한 다음 제출 버튼을 눌러 업데이트하거나 취소 버튼을 눌러 취소하면 셀이 원래 값으로 업데이트됩니다. 값을 다시 두 번 클릭하면 됩니다.

으아아아 으아아아

Answer 1

저는 이렇게 하겠습니다.

먼저 DOM에서 양식을 숨겨 여러 번 및/또는 여러 장소에서 더 쉽게 사용할 수 있습니다.

그런 다음 셀을 더블클릭하면 폼을 복제하고 히든클래스를 제거한 후 셀에 삽입합니다. 이렇게 하면 템플릿처럼 작동합니다.

자세한 내용은 jQuery clone을 참조하세요... 버튼의 이벤트 핸들러도 복제할 수 있으므로... 이렇게 하면 코드 중복이 줄어듭니다. 달성하려면 5분 더 읽어야 합니다 ;)

으아아아 으아아아 으아아아

Answer 2

가장 쉬운 방법은 양식과 표 셀 내용을 별도로 배치하는 것입니다<div>. 그런 다음 표시 여부를 전환할 수 있습니다.

으아아아 으아아아 으아아아