4

このフォームには、ユーザーが無数の値のペア、具体的には言語と習熟度を指定できるセクションがあります。

DOM は次のように構成されています。

<ul id="language-list">
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
    <li class="user-language-item">
        <select name="language[]" class="user-language-select">...</select>
        Level: <select name="proficiency[]">...</select>
        <input type="button" value="Remove" class="remove-language" />
    </li>
</ul>
<input type="button" value="Add another language..." id="add-a-language" />

ユーザーがAdd another language...ボタンをクリックすると、同じフォーム要素を含む新しいリスト項目がリストに挿入されます。

そして、ここに私のコードがあります:

$(function(){

    //Save a clone of one list item during initialization.
    var liItem = $('.user-language-item').last().clone(); 

    $('#add-a-language').click(function(){

        //Append the clone to the list item. But this only works once!
        $('#language-list').append(liItem);

    });

    //Note that there might be an instance where there are no list items present, which is why I opted to clone the a list item during initialization.
    $('.remove-language').live('click', function(){
        $(this).parents('li.user-language-item').fadeOut(500, function(){
            $(this).remove();
        });
    });

});

しかし、クローンは 1 回しか使用できないようです。ボタンを 2 回目にクリックすると、Add a language...リスト項目は追加されません。(興味深いことに、変数をコンソールに出力すると、まだクローンが含まれています!)

これを回避する 1 つの方法は、HTML マークアップを文字列として保存することですが、要素は PHP を介して動的に読み込まれるため、このアプローチは避けています。マークを変更する必要がある場合は、コードの一部を変更するだけで済みます。 -上。

どうすればこれを機能させることができますか？

4

1 に答える 1

10

追加するたびに複製する必要があります

 $('#add-a-language').click(function(){
       var liItem = $('.user-language-item').last().clone(); 
        //Append the clone to the list item. But this only works once!
        $('#language-list').append(liItem);

    });

デモ

コメントによると：

次のように 1 つの li を保持します。

<li class="user-language-item hidden" id="placeHolderLi">
    <select name="language[]" class="user-language-select">...</select>
    Level: <select name="proficiency[]">...</select>
    <input type="button" value="Remove" class="remove-language" />
</li>

それをどこ.hiddenにマークするかdisplay:none;

.hidden{
  display:none;
}

次に、クローンを作成している間、常にこのliをクローンして表示できるようにするため、ユーザーがすべてのliを削除した場合でも、新しい要素を追加できます。

$('#add-a-language').click(function(){
      var liItem = $('.user-language-item:first').clone(true).show();
      //Append the clone to the list item. But this only works once!
      $('#language-list').append(liItem);
 });

デモ

于 2012-04-29T17:49:35.167 に答える