동적으로 HTML 양식에 입력을 추가하십시오.

Question

"추가"링크를 클릭하면 양식에 새로운 입력을 추가해야합니다.

또한 추가 된 각 입력 근처에는 "삭제"링크가 있어야합니다. 그것을 클릭하면이 입력을 제거해야합니다.

어떻게하면됩니까?

Answer 1

이 아니더라도 중복으로 투표를 종료할지 여부는 고민 중입니다. 그러나 당신이 찾고있는 것은 대답하는 것 같습니다. here. (귀하의 링크를 "추가")

$("#selectBox").change(function() { 

대신하는 앵커 요소의 click 이벤트에 바인딩 할 것입니다 : 가장 큰 차이점은 그들이 select 요소에 대한 change 이벤트에 바인딩되는 곳이다

$("#addLink").click(function() { 

"삭제"링크도 비슷한 방식으로 작동합니다. 새로운 입력을 위해 HTML이 생성되면 DOM에 추가하기 전에 옆에있는 "삭제"링크를 만들 수 있습니다 (참조 코드의 .html() 함수 호출). 추가 된 HTML에 고유 한 id (예 : id의 div으로 묶음)과 추가 된 "삭제"링크를 지정해야합니다. 당신이 무엇의 컨테이너의 고유 id를 참조 할 것이 핸들러에서

$("#deleteLink123").click(function() { 

: 그것이 DOM에 추가되는 후

그런 다음, 당신은 "삭제"링크에 이벤트 핸들러를 추가 할 것 DOM에 추가되고 remove it. .live() 함수 here과 좀 더 똑똑한 selectors을 사용하여이 문제를 처리하는 좀 더 우아한 방법이있을 것이라고 확신합니다. 계속 진행중인 지원을 해치는 것처럼 너무 영리하지 않으려 고하면서 이와 같은 것을 재조정하는 것은 흥미로울 것입니다.

당신이 개발할 때 염두에 두어야 할 것입니다 몇 가지 추가 고려 사항이 있습니다이 :

1. 앵커 태그의 기본 링크로,하지만 당신은 그들에게 아무것도 연결하지 않으려는 것 같습니다 . 그것들을 "#"에 링크 할 수는 있지만 정말 우아하지는 않습니다. 완전히 href 속성을 제거 할 수 있지만 시각적으로 링크처럼 동작하도록 스타일을 지정해야합니다. 어렵지는 않지만 직관적이지 않습니다. 왜 단추가 없습니까?
2. 서버에서 처리 할 때 실제 양식이 어떻게 작동하는지는 사용자가 결정합니다. DOM의 요소를 마음의 내용에 동적으로 추가 할 수는 있지만 서버 측에서 도움이되지 않을 수 있습니다. 그것은 또 다른 질문입니다.