2013-07-22 6 views
0

다음 div가 있습니다. 내가 버튼/링크 처음에이 사업부는 숨겨집니다페이지에 동적으로 html 콘텐츠 추가

<div class="add_dependent" style="display: none;"> 
      <div class="dependent_content"> 
       <span> 
        <strong>Dependent<span class="divcount"></span></strong> 
       </span><span class="delete">Delete</span> 
       <div><strong>Relationship to you</strong></div> 
       <div> 
        <input type="radio" value="0" name="relationship" class="dependent-relation" /> 
        <label>Partner</label> 
        <input type="radio" value="1" name="relationship" class="dependent-relation"/> 
        <label>Child under21</label> 
        <input type="radio" value="2" name="relationship" class="dependent-relation"/> 
        <label>dependent over21</label> 
       </div> 
       <div><strong>Date of birth</strong></div> 
       <div> 
        <input type="text" id="dependent-dob" name="dependent-dob" datepicker/> 
        <input type="hidden" id="dependent-id" name="dependent-id" /> 

       </div> 
      </div> 
     </div> 
     <a href="" id="add" ><img src="../../Content/themes/base/images/addnew_depnt.png" style="border: 0px;" alt="add dependent"></a> 

를 클릭 할 때마다 그 필요성이 추가 될 수 있습니다. 이 div는 링크 (클릭하면 추가)를 클릭 할 때마다 동적으로 추가되어야하며, 상위 div의 div id는 종속 + id (1,2,3 ...)로 지정되어야합니다.

이 작업에는 다음 스크립트를 사용했지만 dependent1에 입력 된 데이터는 이후 div에 복제됩니다.

$("body").delegate("#add", "click", function() { 
     var total_length = $(".add_dependent").length 
     $(".add_dependent:eq(0)").clone().prependTo("#dependent-details").css("display", "inline"); 

     $(".add_dependent:last-child .divcount").append(total_length) 

     $(".divcount").each(function (index) { 
      var increment = index + 1 
      $(this).parents(".add_dependent").attr("id", "depend" + increment) 
      $(this).text(increment) 

     }); 
    }) 

종속 링크 추가를 클릭 할 때마다 기존 페이지에 위의 html 요소를 추가하는 방법은 무엇입니까?

누구나 나를 도울 수 있습니까 ???

+1

무엇이 문제입니까? – suspectus

+0

당신은 이것을 위해 jsfiddle를 만들 수 있습니까? 만약 어떤 것이든지 문제를 바로 잡을 수 있습니다 :) http://jsfiddle.net – dreamweiver

+0

추가 종속 항목을 클릭 할 때마다이 div가 기존 div에 추가되어야합니다. 내가 어떻게 할 수 있니? – PaRsH

답변

2

당신은 APPEND 기능을 사용하여 템플릿 사업부에서 HTML을 렌더링을 위해 다른 사업부에 삽입 할 수 원하는 무엇

$("#renderDiv").append($("#templateDiv").html()); 

바이올린 : http://jsfiddle.net/Zz6wU/2/

+0

감사합니다. 그것의 일했다. 하지만 지금 또 다른 문제가 있습니다. 그 div 안에 라디오 버튼이 있습니다. 어떻게 각 그룹에 다른 이름을 붙일 수 있습니까? 이제 모든 라디오 버튼 이름이 "관계"로 설정되었습니다. 어떻게 해결할 수 있을까요? ? – PaRsH

+0

자바 스크립트 템플릿 라이브러리를보고 싶을 수도 있습니다. 핸들바 (http://handlebarsjs.com/)를 사용하는 것을 선호합니다. – verbanicm

+0

템플릿을 사용하고 싶지 않다면, 각 div를 반복하여 모든 변수를 얻는 방법을 보여주기 위해 바이올린을 업데이트하고 그런 식으로 내보낼 수 있습니다. http://jsfiddle.net/Zz6wU/3/ – verbanicm

1

덧글에서 "추가 종속성을 클릭 할 때마다이 div가 기존 div에 추가되어야합니다. 어떻게해야합니까?" :

$("#baseDiv").append($("#newDiv").html()); 

확실하지 그건 당신이

관련 문제