추가 및 삭제하는 방법 아코디언 행 (제품 등록) 버전 2

Question

2적인 버전이 페이지 아래의 문제, 제목에 대한 새로운 질문을 읽어 보시기 바랍니다 : 나는 아코디언 내에서 제품 등록을 추가 할

합니다. 제품 등록 웹 사이트에 들어갈 때 하나의 아코디언이 보일 것입니다 - 제품 세부 사항을 입력해야하며 사용자는 ADD 버튼을 눌러 제품을 추가해야합니다.

추가 버튼을 누르면 제품 등록이있는 새 아코디언이 표시되고 위의 아코디언이 축소됩니다. 그래서 나는 그렇게 할 수 있었지만 두 번째 아코디언 - 제품 등록에 ADD-button을 누르면 새로운 아코디언을 추가하거나 활성 아코디언을 붕괴시키지 않습니다.

아코디언에는 필요한 경우 아코디언을 삭제하는 삭제 버튼과 편집 버튼도 있어야합니다.

내 코드 (필자는 "jQuery를 1 아코디언에서" "추가 및 삭제하는 방법"행을 유래 질문의 도움이 있었다)이 울부 짖는 소리 같습니다

HTML (부트 스트랩)

<div class="panel-group" id="demo"> 
     <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <div class="row"> 
         <div class="col-md-8"><input class="form-test" data-parent="#demo" data-toggle="collapse" href="#luk" placeholder="Produktnavn"></div> 
         <div class="col-md-2"><button type="button" data-parent="#demo" data-toggle="collapse" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button></div> 
         <div class="col-md-2"><button type="button" class="removeBtn" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button></div> 
        </div> 
       </div> 
       <div id="luk" class="panel-collapse collapse in"> 
        <div class="panel-body rowbg"> 
         <div class="row rowbg"> 
          <input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"> 
          <input type="text" class="form-control test-product col-md-3" placeholder="Mærke"> 
          <input type="text" class="form-control test-product col-md-3" placeholder="Model"> 
          <input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"> 
         </div> 
        </div> 

        <div align="right"> 
         <button id="add_item" type="button" data-parent="#demo" href="#luk" class="btn-product btn-success"> 
         TILF&Oslash;J 
         </button> 
        </div> 
       </div> 
     </div> 
    </div> 

스크립트

$('.removeBtn').click(function(){ 
$(this).parent('div').next('div').andSelf().remove(); 
    }); 

    $('#add_item').click(function(){ 
    $('#demo').append('<div class="panel panel-default"><div class="panel-heading"><div class="row"><div class="col-md-8"><input class="form-test" placeholder="Produktnavn"></div><div class="col-md-2"><button type="button" class="removeBtn" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button></div></div></div><div id="luk" class="panel-collapse collapse in"><div class="panel-body rowbg"><div class="row rowbg"><input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"><input type="text" class="form-control test-product col-md-3" placeholder="Mærke"><input type="text" class="form-control test-product col-md-3" placeholder="Model"><input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"></div></div><div align="right"><button id="add_item" data-parent="#demo" href="#luk" type="button" class="btn-product btn-success">TILF&Oslash;J</button></div></div></div>').demo('destroy').demo(); }); 

    $(document).on('click', '.removeBtn', function(){ 
    $(this).parent('div').next('div').andSelf().remove(); 
    return false; }); 

Btw는 속성이 = TILF 및 Oslash는, J =은 영어에 추가한다. VERSION 2

덴마크어

로 번역 :

이

는 어떻게 자동으로 사용자가 추가 각각의 새로운 제품에 새로운 ID/클래스를 추가 할 수 있습니다? 나는 아코디언이 하나의 ID 만 가지고 있고 제품을 추가 할 때 데이터베이스가 분리 할 수없는 다른 모든 아코디언에 동일한 ID가 나타나는 등의 이유로 데이터베이스에있는 다른 추가 제품의 정보를 가져 오는 데 문제가 있습니다.

이 문제를 해결하려면 어떤 해결책이 있습니까?

미리

data-attribute 페이지로드에서만 사용할 수 있습니다 때문입니다

Answer 1

에 감사드립니다.

동적으로 요소를 추가하는 경우 새 요소에 JS에 영향을 주어야합니다.

그리고 당신은 많은 패널을 것 같은, ID를 사용하지 않는, 그냥 고유 ...

Bootply : http://www.bootply.com/122478

JS :

$toAppend = '<div class="panel panel-default"><div class="panel-heading"><div class="row"><div class="col-md-8"><input class="form-test" placeholder="Produktnavn"></div><div class="col-md-2"><button type="button" class="removeBtn" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button></div></div></div><div id="luk" class="panel-collapse collapse in"><div class="panel-body rowbg"><div class="row rowbg"><input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"><input type="text" class="form-control test-product col-md-3" placeholder="Mærke"><input type="text" class="form-control test-product col-md-3" placeholder="Model"><input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"></div></div><div align="right"><button id="add_item" data-parent="#demo" href="#luk" type="button" class="add_item btn-product btn-success">TILFØJ</button></div></div></div>'; 

makeAddable(); 
makeDelete(); 


    function makeCollapsable(){ 
    $('.form-test').unbind('click'); 
    $('.form-test').on('click', function(){ 
      $('.collapse').collapse('hide'); 
      $(this).parent().parent().parent().next().collapse('toggle'); 
    });  
    } 

    function makeAddable(){ 
    $('.add_item').unbind('click'); 
    $('.add_item').on('click', function(){ 
      $('#demo').append($toAppend); 
      makeAddable(); 
      makeDelete(); 
      makeCollapsable(); 
    }); 
    }  

    function makeDelete(){ 
     $('.removeBtn').unbind('click'); 
     $('.removeBtn').on('click', function(){ 
     $(this).parent().parent().parent().parent().remove(); 
     }); 
    }  

HTML :

<div class="panel-group" id="demo"> 
     <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <div class="row"> 
         <div class="col-md-8"><input class="form-test" data-parent="#demo" data-toggle="collapse" href="#luk" placeholder="Produktnavn"></div> 
         <div class="col-md-2"><button type="button" data-parent="#demo" data-toggle="collapse" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button></div> 
         <div class="col-md-2"><button type="button" class="removeBtn"><span class="glyphicon glyphicon-trash"></span></button></div> 
        </div> 
       </div> 
       <div id="luk" class="panel-collapse collapse in"> 
        <div class="panel-body rowbg"> 
         <div class="row rowbg"> 
          <input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"> 
          <input type="text" class="form-control test-product col-md-3" placeholder="Mærke"> 
          <input type="text" class="form-control test-product col-md-3" placeholder="Model"> 
          <input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"> 
         </div> 
        </div> 

        <div align="right"> 
         <button id="add_item" type="button" data-parent="#demo" href="#luk" class="add_item btn-product btn-success"> 
         TILFØJ 
         </button> 
        </div> 
       </div> 
     </div> 
    </div>