"隐藏和显示"按钮在追加后不起作用

Question

我有一个简单的方法来隐藏和显示。我尝试使用live()函数，但即使是这种方法也不起作用。我想附加<div>，每个<div>都应该有一个隐藏和显示按钮。此外，当我单击隐藏时，<div>应该隐藏。

$(document).ready(function() {
var max_fields = 20; //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() { //on add input button click
if (x <= max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div id="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">show</button></div>');
}
});
});
$("#myclass").on("click", ".hide_field", function() {
$(this).hide();
});
$("#myclass").on("click", ".show_field", function() {
$(this).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add Comment</button>
<br>
<div id="myclass"><input type="text" name="mytext[]">
</div>
</div>

Answer 1

实施matthias_h:提出的更改

• 使用class而不是id
• 使用on click处理程序的三参数形式
• 使用$(this).closest瞄准输入

$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count

$(add_button).click(function() { //on add input button click
if (x <= max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="myclass""><input type="text" name="mytext[]"/><button onclick class="hide_field">Hide</button><button onclick class="show_field">Show</button></div>');
}
});
});
$(document.body).on("click", ".myclass .hide_field", function() {
$(this).closest("div").children("input").hide();
});
$(document.body).on("click", ".myclass .show_field", function() {
$(this).closest("div").children("input").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add Comment</button>
<br>
<div class="myclass"><input type="text" name="mytext[]">
</div>
</div>