요소 ID를 여러 번 변경하십시오

Question

그래서 하나의 요소에서 div에 다른 요소를 추가하고 해당 ID 특성 (또는 이와 유사한 요소)을 변경하려면 triying을해야합니다.

난이

$('#add3').click(function(){ 
      $('#add3').attr("id", "add4"); 
      $('.third_row1').append('something to append'); 
     });  

같은 것을 시도하고 또한 같은 것을 시도 :

$('#add').click(function(){ 
      var vari = $("<div id='add2'>add another user</div>"); 
      $('#add').remove(); 
      $('.third_row1').append(vari); 
      $('.third_row1').append('something to append'); 
     });  

있으므로 (제 예와 같이) 하나 개의 버튼을 클릭 네번째, 세번째에 영향을주지 ... n 클릭
두 번째 예와 동일한 것

미리 도움을 청합니다.

UPD는

<jsp:useBean id="obj1" class="com.Users" scope="page"/> 
    <div class="third_row1"> 
     <select name="mySelect1" id="mySelect1"> 
      <c:forEach var="item1" items="${obj1.items}"> 
       <option>${item1}</option> 
      </c:forEach> 
     </select> 
    </div>  

내가하고 싶은 모든 내가 추가 할 선택을 생성하는 방법을

좋아, 그래서 여기에 동일한 선택 추가하는 것입니다,하지만 다른 ID와 이름

Answer 1

와

요소 ID가 동적으로 변경되므로 delegated event handlers with .on()을 사용해야합니다. 예를 들어

:

$(document).on("click", "#add3", function() { 
    $('#add3').attr("id", "add4"); 
    $('.third_row1').append('something to append'); 
}); 

이러한 모든 요소 (#add, #add3)이 내부 페이지 정적 요소 있다면, 성능에 대 한 대신 document의이 요소를 사용하는 것이 더 좋을 것입니다 :

$("static_element_selector").on("click", "#add3", function() { 

그리고주의 할 점은 this 내부의 이벤트 핸들러가 클릭 된 DOM 요소를 가리키고 있으므로 $('#add3').attr("id", "add4"); 대신 this.id = "add4"을 사용할 수 있습니다. 그것은 더 짧고 약간 더 빠르게 작동합니다.