jquery - すべてのネストされた要素を持つ Jquery Clone オブジェクト

Question

JQM ラジオ オプションのクローンを作成し、最後に挿入したいと考えています。問題はclone()、ネストされたすべての要素 (動的に生成されたもの) をコピーしないことです。すべての子孫ではなく、最初の子をコピーするだけです。radio オプションの生成されたコンテンツには、子孫要素も持つ label 要素が含まれていますが、何らかの理由で複製されません。

ここにフィドルがありますhttp://jsfiddle.net/aSKBW/7/

Answer 1

.clone()あなたの選択を切り捨てていません、あなたは:)です。これを行う場合:

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

label次のような要素の HTML 構造を上書きしています。

<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>

関数をいじると、.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">Red</label>

修正は、.ui-btn-text要素をターゲットにして、そのテキストを変更することです:

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

JSFiddle の更新バージョンは次のとおりです: http://jsfiddle.net/aSKBW/13/

jQuery Mobile に慣れ、DOM に多くの構造を追加する方法に慣れる際によくある間違いです。

Answer 2

前のように、通常の入力とラベルを挿入できます。

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

create次に、一番上のdivでイベントをトリガーします

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

最後に追加するため、前のラベルからいくつかのクラスを削除する必要があります。

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

Fiddle の更新は、http: //jsfiddle.net/aSKBW/16/にあります。

Answer 3

ディープ コピーに「true」を渡す必要があるだけではありませんか?:

.clone(true)

一致した要素のセットのディープ コピーを作成します。

.clone ( withDataAndEvents )追加されたバージョン: 1.0 withDataAndEvents : イベント ハンドラーを要素と共にコピーする必要があるかどうかを示すブール値。jQuery 1.4 以降、要素データもコピーされます。

.clone ( withDataAndEvents deepWithDataAndEvents )追加されたバージョン: 1.5 withDataAndEvents : イベント ハンドラーとデータを要素と共にコピーする必要があるかどうかを示すブール値。デフォルト値は false です。*1.5.0 の場合、デフォルト値は間違って true です。これは、1.5.1 以降では false に戻されます。

deepWithDataAndEvents : 複製された要素のすべての子のイベント ハンドラーとデータをコピーする必要があるかどうかを示すブール値。デフォルトでは、その値は最初の引数の値 (デフォルトは false) と一致します。

Answer 4

こちらで複製できましたので、ご覧ください。問題になる可能性のあるまったく同じ値とIDになりますが、機能します。 http://jsfiddle.net/aSKBW/9/

クローンには 2 つのオプションがあります .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');
    });
});​