5

単純なフォームがあり、各行は3つの入力フィールドで構成されています。それらのフィールドの1つで、jscolor.jsを使用します（フィールドにはがありclass="color"、したがってJSをバインドします）。

ただし、jQueryを使用して新しい行を追加するdelegate()と、入力フィールドがJSにバインドされず、期待される機能がありません。http://jsfiddle.net/alexwald/qARzP/

<script>
var line = '<li class="form_line" id="line">    
              <span>
                <label for="item">Item:</label>
                <input type="text" required="required" placeholder="what item is this?" id="item" name="item[]>
              </span>
              <span>
                <label for="amount">Amount: </label>
                <input required="required"  type="number" id="amount" name="amount[]>
              </span>
              <span>
                <label for="color">Color: </label>
                <input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" id="color" name="color[]">
              </span>
            </li>';

$(document).ready(function() {          
  $("form").delegate(".add", "click", function(){        
    $('ul').append(line); 
  }); // end of adding                              
}); //end of main func 
</script>

問題は次のいずれかにあると思います。

  • line変数を定義する方法、または
  • で不適切なセレクターを使用しているので、 ...delegateではなく別のものにする必要があります。form

どんな助けでも大歓迎です。

4

3 に答える 3

3

コードにはいくつかの問題があります。

  1. 「line」変数で ID を使用しています。ID は HTML ドキュメント内で一意である必要があります。ID を変更できるように、name 属性を使用するか、別の方法で新しい行を作成することをお勧めします。

  2. 「追加」ボタンの「クリック」イベントを委譲するのはなぜですか? イベント委譲は、動的に作成された要素にイベントを自動的に「バインド」できるようにするために使用されます。あなたの例では、「追加」ボタンはページに対して静的です。デリゲートを使用する必要はなく、単に .click() または .bind() です。

  3. 新しい行を作成した後、新しいフィールドで jscolor を明示的に初期化する必要があります。これは自動的には行われません。ページが最初に解析されるとき、既存の<input class="color" />要素は jscolor プラグインによって初期化されますが、その後に挿入された要素はもう存在しません。スクリプトは既に実行されています。

変更されたコードは次のとおりです。

<script> 
    var line = '<li class="form_line" id="line"><span><label>Item:</label><input type="text" required="required" placeholder="what item is this?" name="item"></span><span><label>Amount: </label><input required="required" type="number" name="amount"></span><span><label>Color: </label><input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" name="color"></span></li>';

    $(document).ready(function() {

       var $ul = $('#formulario'); // the UL, select it once and r-use this selection

       $('.add').click(function(e) {
           var $line = $(line);
           $line.appendTo($ul);

           // initialize the new jscolor instance
           new jscolor.color($line.find('input[name=color]')[0], {});

       });


    }); //end of main func 
</script>

そして、テスト用のこのjsfiddle。

于 2011-12-03T09:26:19.800 に答える