セクションを動的に追加し、それらを使ってJQueryで他のセクションを追加する方法は？

Question

ストレートポイント。 .append()機能に問題があります。私はdatetime-localとボタンを含むセクションを別のセクションに追加する必要があります。これは可視です。

この新しい追加ボタンは、同じ要素を含むが異なるIDを持つ別のセクションを追加する必要があります。コードの最初の部分は動作していますが、2番目の部分は動作しません。理由はわかりません。私のコードは象のようにエレガントだと分かっていますが、...

あなたのご協力ありがとうございます！

$(document).ready(function() { 
 
    var max_fields = 2; 
 
    var wrapper = $(".input_1"); 
 
    var add_button = $(".add_1"); 
 

 
    var x = 1; 
 

 
    $(add_button).click(function(e) { 
 
    e.preventDefault(); 
 
    if (x < max_fields) { 
 
     x++; 
 
     $(wrapper).append('<section class="input_2">-.-.-<br/><input type="datetime-local"><a href="#" class="remove_1">Remove</a><br /> <button class="add_2">return</button> </section>'); 
 
    } 
 
    }); 
 

 
    $(wrapper).on("click", ".remove_1", function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent('section').remove(); 
 
    x--; 
 
    }) 
 
}); 
 

 
//level 2 
 
$(document).ready(function() { 
 
    var max_fields_2 = 2; 
 
    var wrapper_2 = $(".input_2"); 
 
    var add_button_2 = $(".add_2"); 
 

 
    var x = 1; 
 

 
    $(add_button_2).click(function(e) { 
 
    e.preventDefault(); 
 
    if (x < max_fields_2) { 
 
     x++; 
 
     $(wrapper_2).append('<section>-.-.-<br/><input type="datetime-local"><a href="#" class="remove_2">Remove</a><br /> <button class="add_3">return 2</button> </section>'); 
 
    } 
 
    }); 
 

 
    $(wrapper_2).on("click", ".remove_2", function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent('section').remove(); 
 
    x--; 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="input_1"> 
 
    <input type="datetime-local"><br/> 
 
    <button class="add_1">return to icu</button> 
 
</section>

Answer 1

あなたはそれがあなたのコード内で「.remove_1" のためだと同様に、デリゲートを使用して動的に追加されたコンテンツのためのイベントハンドラ内の要素を見つける必要があります。

//level 2 
 
$(document).ready(function() { 
 
    var max_fields_2 = 2; 
 
    var x = 1; 
 

 
    $(document).on('click', '.add_2', function(e) { 
 
    e.preventDefault(); 
 
    var wrapper_2 = $(".input_2"); 
 
    if (x < max_fields_2) { 
 
     x++; 
 
     $(wrapper_2).append('<section>-.-.-<br/><input type="datetime-local"><a href="#" class="remove_2">Remove</a><br /> <button class="add_3">return 2</button> </section>'); 
 
     $(wrapper_2).on("click", ".remove_2", function(e) { 
 
     e.preventDefault(); 
 
     $(this).parent('section').remove(); 
 
     x--; 
 
     }) 
 
    } 
 
    }); 
 
});

Answer 2

var max_fields  = 10; //maximum input boxes allowed 
 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
 
    var add_button  = $(".add_field_button"); //Add button ID 
 
    
 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e){ //on add input button click 
 
     e.preventDefault(); 
 
     if(x < max_fields){ //max input box allowed 
 
      x++; //text box increment 
 
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
 
     } 
 
    }); 
 
    
 
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input_fields_wrap"> 
 
    <button class="add_field_button">Add More Fields</button> 
 
    <div><input type="text" name="mytext[]"></div> 
 
</div>

のhAPPコーディング:)

Answer 3

あなたがvar wrapper_2 = $(".input_2");を設定したが$(".input_2")ときdocument.ready becuaseだexistinされていませんはい、それはundefinedです。

$(document).ready(function() { 
 
    var max_fields = 2; 
 
    var wrapper = $(".input_1"); 
 
    var add_button = $(".add_1"); 
 

 
    var x = 1; 
 

 
    $(add_button).click(function(e) { 
 
    e.preventDefault(); 
 
    if (x < max_fields) { 
 
     x++; 
 
     $(wrapper).append('<section class="input_2">-.-.-<br/><input type="datetime-local"><a href="#" class="remove_1">Remove</a><br /> <button class="add_2">return</button> </section>'); 
 
    } 
 
    }); 
 

 
    $(wrapper).on("click", ".remove_1", function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent('section').remove(); 
 
    x--; 
 
    }) 
 
}); 
 

 
//level 2 
 
$(document).ready(function() { 
 
    var max_fields_2 = 3; 
 

 
    var x = 1; 
 

 
    $('body').on('click', '.add_2', function(e) { 
 
    e.preventDefault(); 
 
    if (x < max_fields_2) { 
 
     x++; 
 
     $(".input_2").append('<section>-.-.-<br/><input type="datetime-local"><a href="#" class="remove_2">Remove</a><br /> <button class="add_3">return 2</button> </section>'); 
 
    } 
 
    }); 
 

 
    $(".input_2").on("click", ".remove_2", function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent('section').remove(); 
 
    x--; 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="input_1"> 
 
    <input type="datetime-local"><br/> 
 
    <button class="add_1">return to icu</button> 
 
</section>