jquery - 動的に完全に機能しないフィールドを追加する

Question

hereからチュートリアルに基づいて、別のボタンで削除されたボタンで動的に追加できるフィールドを作成しようとしています。動的に作成されるはずのフィールドの別のグループが何も追加していないことを除いて、ほとんどうまく動作します。

ここでは、私がcodepenで行ったことがあります。私はリンクcodepenに何をしたかを参照する

<div class="field_wrapper">  
      <a href="javascript:void(0);" class="add_button" title="Add field">New Group</a> 
    </div> 

    <script> 
     $(document).ready(function(){ 
    var maxField = 10; //Input fields increment limitation 
    var addButton = $('.add_button'); //Add button selector 
    var wrapper = $('.field_wrapper'); //Input field wrapper 
    var fieldHTML = '<div><a href="javascript:void(0);" class="remove_button" title="Remove field">X</a><table id="add_on_table"><tbody><tr><td><label class="field">Group Name</label><input type="text" name="product_addon_name[]"></td><td><input type="checkbox" name="product_addon_required[]"> Mark as Required</td></tr><tr><td><label class="field">Group Description </label><textarea name="product_addon_description[]"></textarea></td></tr><tr><table><thead><tr><td>Option Label</td><td>Option Price (RM) </td></tr></thead><tbody class="addonoption"><tr><td><input type="text" name="product_addon_option_label[]"></td><td><input type="text" name="product_addon_option_price[]"></td><td><a href="javascript:void(0);" class="remove_row" title="Remove field">X</a></td></tr> </tbody><tfoot><tr><td><input type="button" class="add_option" value="New Option"></td></tr></tfoot></table></tr></tbody></table></div>'; //New input field html 
    var AddRow = $('.add_option'); //Add button selector 
    var RowWrapper = $('.addonoption'); //Input field wrapper 
    var rowHTML = '<tr> <td><input type="text" name="product_addon_option_label[]"></td><td><input type="text" name="product_addon_option_price[]"></td><td><a href="javascript:void(0);" class="remove_row" title="Remove field">X</a></td></tr>';  
    var x = 1; //Initial field counter is 1 
    $(AddRow).click(function(){ //Once add button is clicked  
     $(RowWrapper).append(rowHTML); // Add field html   
    }); 
    $(addButton).click(function(){ //Once add button is clicked 
     if(x < maxField){ //Check maximum number of input fields 
      x++; //Increment field counter 
      $(wrapper).append(fieldHTML); // Add field html 
     } 
    }); 
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked 
     e.preventDefault(); 
     $(this).parent('div').remove(); //Remove field html 
     x--; //Decrement field counter 
    }); 
    });</script> 

「新しいグループ」リンクを押すと、フィールドがOK生成。ただし、「新規オプション」ボタンをクリックしても何も作成されません。 JSのセクションでは、フィールドを作成するためのコードを記述していますが、それはうまく機能していません。どんな考え？ Btw、私はjavascript/jqueryでかなりnoobだから、もしそれが単なる愚かなミスなら、ごめんなさい。前もって感謝します！

Answer 1

.add_option要素でもevent delegationを使用する必要があります。 DOMは最初にレンダリングされた後に作成されるため、クリックハンドラは何にも付加されません。また、

$(document).on("click", ".add_option", function(){ //Once add button is clicked 
    $(this).closest("table").find(".addonoption").append(rowHTML);   
}); 

私はあなたが複数のグループを持っている場合、それはHTMLを追加しますので、あなたのセレクタは、潜在的にあまりにも台無しにされていることに気づいた：あなたはそれを動作させるために、その構文をコピーできるようにするには、.remove_buttonのイベントの委任を使用しますそれらのそれぞれにこれが意図した動作であれば、セレクタを$(".addonoption").append(rowHTML)に変更することができます。そうしないと、上記のコードが機能します。

Answer 2

AddRowにクリックハンドラを追加しようとすると、ボタンがまだ存在しないという問題があります。 AddRowへのハンドラを作成する代わりに、.on()functionを使用する必要があります。例：

$(".field_wrapper").on("click", ".add_option", function() {alert("foo");}); 

説明：

• .field_wrapperあなたはon
• click呼び出すとき、セレクタがすでに存在しているとして、あなたが
• .add_optionを処理しようとするイベントが存在する適用されるセレクタですまだ存在しない要素 .add_option
• functionは実行されるイベントハンドラです