2

jQuery Mobile の .clone() 関数を使用してフォーム内の div を複製し、繰り返し可能なセクションを作成していますが、ネストされた選択に問題があります。
div が複製され、ネストされた選択が新しい ID で更新されると、次の「更新」後に奇妙なことが起こります。

何が起こるかは非常に奇妙です。選択は二重になり、既存の選択内に配置されるため、結果は次のようになります。

JQM と複製された選択での奇妙な動作

ブラウザは Safari です。このコードは Safari でのみ動作する必要があるため、他のブラウザではテストを行っていません。

divを複製するために私がすることは次のとおりです。

var div = $.mobile.activePage.find('.repeatable').last().clone();

クローンを作成してから、ID を更新します。

var newValue = pid +'-' + index;
$(this).attr('id', newValue);
$("label[for='"+ old +"']").attr('for', newValue);

そして最後に、.val() が呼び出されたら、すべての選択を更新して正しい値が選択されるようにします。

if ($(this).data('role') === 'select') {
    $(this).selectmenu();
    $(this).selectmenu('refresh');
}

コードの最後の部分が呼び出されると、問題が発生します。選択が正しく表示される前に、選択が更新されると正しく機能し始めますが、元の要素の子として二重に配置されているため、UI が混乱します。

クローンボタンの前に、次の方法で div を追加します。

$('#clone_button').before(div);

この問題の原因は何ですか?

編集:これは jQuery Mobile: exampleのバグのようです。

4

2 に答える 2

1

私はついにこの問題の回避策を見つけました。現時点では、拡張可能なアイテムのクローンはjQuerymobileではサポートされていません。

これを行う唯一の方法は、複製されたdivを手動で編集および修正し、select周辺のスタイルアイテムを削除してそれらを分離することです。

私たちがしなければならないことは非常に単純ですが、注意が必要です。

  • クラスですべてのDIVをナビゲートするui-select
  • ネストされたSELECT削除不要なタグを外挿します
  • DIVの後または前のHTMLコードを追加しますSELECTui-select
  • ui-selectDIVを削除します
  • 繰り返し可能なDIVを追加します
  • 親を呼び出しtrigger('create')て、正しいスタイルを再生成します。

面倒ですが、機能します。

JSFiddleの例を更新しました。（編集：JSFiddleのarschmitzからの別の良い解決策）

PSラベルを使用している場合は、ラベルをどこかに保存して、正しい位置に再追加する必要があります。

于 2012-10-19T13:39:48.380 に答える
0

.find() があなたの問題だったようです。children() を使用すると、「バグ」の更新された jsfiddle も解決されました

function cloneRepeatableGroup() {
var div = $.mobile.activePage.find('.repeatable').last().clone();
div.children('select').each(function() {
    var element = $(this);
    var index = element.attr('id');
    index++;
    element.attr('id', index);


    element.selectmenu();
    element.selectmenu('refresh');
});

$('#clone_button').before(div);
}

$("#clone_button").click(function(){
cloneRepeatableGroup();
});

http://jsfiddle.net/7jGcw/2/

于 2012-10-19T08:42:45.247 に答える