Jquery 모든 중첩 요소가있는 객체 복제

Question

JQM 라디오 옵션을 복제하고 끝에 삽입하고 싶습니다. 문제는 clone()이 (동적으로 생성 된) 중첩 요소를 모두 복사하지 않는다는 것입니다. 그것은 단지 모든 자손이 아닌 첫 번째 자식을 복사합니다. 라디오 옵션의 생성 된 내용에도 하위 요소가있는 label 요소가 포함되어 있지만 어떤 이유로 복제되지 않습니다.

여기 http://jsfiddle.net/aSKBW/7/

Answer 1

.clone()은 선택을 자르지 않습니다. :) :

new_option.find('label').text('Red'); 

당신이처럼 보이는 label 요소의 HTML 구조를 덮어 쓰는 : :이처럼 보이는 .text() 기능을 엉망 후

<label for="sky-color-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"> 
    <span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"> 
     <span class="ui-btn-text">Green</span> 
     <span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span> 
    </span> 
</label> 

:

<label for="sky-color-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c">Red</label> 

을 당신은이 작업을 수행 할 때

수정 도구는 .ui-btn-text 요소를 타겟팅하고 텍스트를 변경하는 것입니다.

http://jsfiddle.net/aSKBW/13/ jQuery를 모바일로 사용하고는 DOM에 너무 많은 구조를 추가하는 방법을 점점 때 그것은 매우 일반적인 실수, 너무 기분 나빠하지 마십시오 : 여기

new_option.find('.ui-btn-text').text('Red'); 

은 JSFiddle의 업데이트 버전입니다.

Answer 2

방금 ​​딥 카피에 '사실'전달해야하지 마십시오 바이올린?

.clone(true) 

이 일치하는 요소의 집합의 깊은 복사본을 만듭니다에게 있습니다.

.clone (withDataAndEvents) 버전 추가 : 1.0 withDataAndEvents : 부울 이벤트 핸들러가 요소와 함께 복사해야하는지 여부를 나타내는. jQuery 1.4에서 요소 데이터는 으로 복사됩니다.

.clone (withDataAndEvents의 deepWithDataAndEvents) 버전 추가 : 1.5 withDataAndEvents : 부울 이벤트 핸들러 및 데이터 요소와 함께 복사해야하는지 여부를 나타내는. 기본값 은 false입니다. * 1.5.0의 경우 기본값이 잘못 적용됩니다. 이것은 을 1.5.1 이상에서 false로 다시 변경합니다.

deepWithDataAndEvents : 복제 된 요소의 모든 자식에 대한 이벤트 처리기 및 데이터가 복사되어야하는지 여부를 나타내는 부울 복사 됨. 기본적으로이 값은 첫 번째 인수의 값과 일치합니다 ( 기본값은 false 임).

Answer 3

나는 그것을 여기에서 복제 할 수 있었다. 결국 문제가 될 수있는 정확한 값과 ID로 끝나지 만 제대로 작동합니다. http://jsfiddle.net/aSKBW/9/

클론이 옵션 .clone ([withDataAndEvents] [, deepWithDataAndEvents])

$(document).ready(function(){ 
    $('.add-option').click(function(e){ 
     $('.ui-radio:eq(0)').clone(true, true).appendTo('.ui-controlgroup-controls'); 
     $('.ui-radio:eq(1)').clone(true, true).appendTo('.ui-controlgroup-controls'); 
    }); 
});​ 

Answer 4

이런 종류의 일에 대한 일반적인 솔루션은 다음 개체를 직렬화 새로운 객체로 직렬화하는 것입니다있다.

사용중인 라이브러리 또는 프레임 워크에 따라이 작업을 수행 할 수있는 기능이 내장되어있을 수 있습니다.

knockoutjs를 사용하면 객체를 JSON 문자열로 변환하는 ko.toJSON 유틸리티 함수를 통해이 작업을 수행 할 수 있습니다.

아무리 복잡한 사람이라도 직렬화 및 비 직렬화를 제대로 처리 할 수있는 일반적인 솔루션을 아직 보지 못했습니다.이 중 하나가 있으면 여기에 게시하여 많은 사람들에게 유용 할 것입니다.

Answer 5

전에 같은 정상적인 입력 및 라벨을 삽입 할 수 있습니다 : 당신이 결국 추가 때문에 상단 DIV에 create 이벤트를 트리거 한 후

$('<input type="radio" name="sky-color" value="red" id="sky-color-' + index + '" class="custom" /> <label for="sky-color-' + index + '">Red</label>'); 

$('#slide21').trigger('create'); 

그리고 당신은 제거해야 이전 레이블의 일부 수업 :

last.find('label').removeClass('ui-corner-bottom ui-controlgroup-last'); 

귀하의 바이올린은 여기에서 찾을 수 있습니다 : http://jsfiddle.net/aSKBW/16/