1

チェックするコードの断片はFF、Chrome、Safariで正常に機能しますが、jQueryクローン関数を実行する場合はIEに問題があるようです。

私のテンプレート：

<form method="post" action="/post/add/">
{{ form.management_form }}
    <div class='table'>
      <table class='no_error'>
        <input id="id_mypost_set-0-title" type="text" name="mypost_set-0-title" />
        <input id="id_mypost_set-0-content" type="text" name="mypost_set-0-content" />
      </table>
    </div>
    <input type="button" value="Add Other" id="add_more">
    <script>
        $('#add_more').click(function() {
            cloneMore('div.table:last', 'mypost_set');
         });
    </script>
</form>

javascriptファイルの場合：

function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
 }

問題はセレクターにあります：「元のhtmlコードのクローンは正常に機能します」が、クローンされたコードからのクローンはセレクターを「未定義」としてマークします。つまり、2回目にテーブルをクローンします。これらの複製されたアイテムに対して、セレクターは機能しなくなります。

IEでのみ問題が発生します。

何が欠けていますか？ヒントはありがたいです:)

4

4 に答える 4

4

これは既知のjQueryバグですが、修正されたとのことです。
ここでの1つのオプションは、を使用し.html()、それらを手動で複製することです。これはイベントのクローンを作成して保存.dataしません。これは問題になる可能性があります。.liveここでイベントがある場合に役立ちます。

名前とIDを変更するだけの場合は、正規表現を使用することをお勧めします（これにより、最初の要素からイベントが複製されます）。

var name = $(this).attr('name').replace(/-\d+-/,'-' + total + '-');

これにより、が検索され-number-て置き換えられるため、すべてのブラウザまたは-0-IEで最後の番号が検出されます。

アラート付きの動作デモは次のとおりです：http：//jsbin.com/evapu

ちなみに、コードは少し面倒です。jQueryコードは内部$(document).ready（クリック）にある必要があり、本文のないテーブルがあり（いいえ<tr>、<td>-入力はスローされます）、コードにはいくつかの重複があります。
この場合は役に立ちませんでしたが、無効なDOMとreadyイベントを使用しないと、問題が発生する可能性があります。

于 2009-10-20T06:38:01.107 に答える
0

前に述べたように、コードはすべてのブラウザで完全に機能します。

var newElement = $(selector).clone(true);

と：

var newElement = $($(selector).html());

それが役立つかどうかを確認します。

また、そのように、イベントハンドラーを再アタッチします。

newElement.bind(EVENT, function() {});

または、適切なヘルパーを使用してください。

于 2009-10-21T21:17:44.120 に答える
0

ID'id_' + type +'-TOTAL_FORMS'の非表示の入力がありません-このオブジェクトから合計を取得し、それを使用して複製されたオブジェクトの名前とIDを変更しています。

私はこれであなたのコードを試しました：

<input type="hidden" id="id_mypost_set-TOTAL_FORMS" value="1"/>

直後に追加

<form method="post" action="/post/add/">

そしてそれは正しく動作し、すべての新しい入力は正しいIDを持っています。これは本当にFFで機能しますか？

于 2009-10-22T14:56:19.877 に答える
-1

おそらくあなたはこのクローン関数を使うことができます：

/*
 * Clone method
 * Prevents reference problem
 */
clone: function( obj ){
  if(obj == null || typeof(obj) != 'object')
    return obj;
  var temp = new obj.constructor();
  for(var key in obj)
    temp[key] = clone(obj[key]);
  return temp;
}
于 2009-10-13T16:31:36.200 に答える