jQueryを使用してフォーム要素をクローンした後にAJAX関数を呼び出す方法は？

Question

私はフォーム要素を複製するためにSheepIt!プラグインを使用して、クローン化できる動的フォームを持っています。私のフォームには、最初のドロップダウンボックスからの選択に基づいて2番目のドロップダウンボックスに値のセットが表示される、ドロップダウンボックスの動的セットがあります。

私の問題は、ドロップダウンボックスの動的機能がクローンドドロップダウンで機能せず、ページ上の最初のドロップダウンでのみ機能することです。

これは何が起こっているのですか？

私はあなたがどのようにSheepItを見ることができるようにフィドルを作成しました！プラグインが動作しますが、http://jsfiddle.net/DeJch/1/ですが、追加/削除機能はフィドルでは機能していません。

クローン作成後にAJAXを呼び出す必要がありますか？

多分$('#container_add').live('click', function() { */ */ });のようなものでしょうか？

HTML：

<div> 
    <label>Item:</label> 
    <select class="item" name="item" id="item"> 
     <option value="">Select</option> 
     ... 
    </select> 
</div>   
<div> 
    <label class="label>Options:</label> 
    <select class="options" name="options" id="options"> 
     ... 
    /select> 
</div> 

Javascriptを：

$(document).ready(function(){ 

    var sheepItForm = $('#clone').sheepIt({ 
     separator: '', 
     allowRemoveLast: true, 
     allowRemoveCurrent: true, 
     allowAdd: true, 
     maxFormsCount: 3, 
     minFormsCount: 1, 
     iniFormsCount: 1 
    }); 

    $(".item").change(function() { 

     var group_id = $(this).val(); 
     var self = $(this); // Added line 

     var $children = $(this).parent().next().children('select.options') 

     $.ajax({ 
      type: "POST", 
      url: "../../db/groups.php?id=" + group_id, 
      dataType: "json", 
      success: function(data){  
       $children.empty() 
       $children.append('<option value="">Select</option>');   
       $.each(data, function(i, val){  
        $children.append('<option value="' + val.group_id + '">' + val.name + '</option>'); 
       }); 
       $children.focus(); 
      }, 
      beforeSend: function(){ 
       $children.empty(); 
       $children.append('<option value="">Loading...</option>'); 
      }, 
      error: function(){ 
       $children.attr('disabled', true); 
       $children.empty(); 
       $children.append('<option value="">No Options</option>'); 
      } 
     }) 

    }); 

}) 

Answer 1

私はクローンが作られた後にAJAXをリコールする必要がありますか？

Maybe something like $('#container_add').live('click', function() { */ */ });? 

ほとんどはい、それが廃止されると.live()イベントを使用しないでください。代わりにon()イベントを使用してください。構文はほぼ同じです

$('#container_add').on('click', function() { */ */ }); 

onイベントはliveとよく似ています。見てくださいhttp://api.jquery.com/live/

Answer 2

あなたがあなたの答えを受け入れたとしても、私はSheepItを言いたいと思った！プラグインは、beforeClone、afterClone、beforeAdd、afterAddというコールバックを提供します。

オプションでafterAddコールバックを指定すると、新しく作成されたクローンフォームに追加機能をバインドできます。

myCustomSheepitOptions = { 
    separator:'', 
    allowRemoveLast:false, 
    allowRemoveCurrent:true, 
    allowRemoveAll:true, 
    allowAdd:true, 
    allowAddN:false, 
    maxFormsCount:10, 
    minFormsCount:1, 
    iniFormsCount:1, 
    afterAdd:function (data) { 
     initializeAutotab($('input.autotab', data)); 
     initializeDatePicker(data); 
    } 
}; 

残念ながら、afterAddに渡されるデータは、作成した新しいフォームに過ぎません。

このアプローチの欠点は、ネストされたフォームを使用している場合、ネストされたオプションに同じafterAddを指定する必要があることです。

これは、ライブ/オンを使用する代わりに使用できます。

編集：afterCloneは、コンテンツが実際にDOMに追加される前のようであるため、afterCloneの代わりにafterAddを使用します。