Hide and Show button not working after appending

Question

I have a simple method to hide and show. I tried to use the live() function and even this method is not working. I want to append the <div> and with every <div> there should be a hide and show button. Also, the <div> should hide when I click on hide.

$(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>

You're delegating the click events to `#myclass` element, but appending the new buttons to `.input_fields_wrap` element. Delegation works only on the direct "path" from the child to its parent. — Teemu, Mar 12 '20 at 13:50
Ummm ... how about delegating the events to `.input_fields_wrap` instead ..? Then you also have a problem with `this`, which will hide/show the button, probably you meant to hide the input instead? — Teemu, Mar 12 '20 at 15:24
Then you've to select the field to hide instead of the button. — Teemu, Mar 12 '20 at 16:30
There are 3 issues with your code. An id has to be unique and you're adding divs with the same id 'myclass' when clicking "add". Change this to be a class instead of an id. The second issue is event binding on dynamically created elements as described by the linked duplicate question . Events for those created elements have to be delegated from a parent element, e.g. from '': $("body").on("click", ".myclass .hide_field", function() {...}'. Last issue is the target of the delete/show functions as already mentioned. '$(this).closest("div").children("input").hide();' targets the input. — matthias_h, Mar 13 '20 at 14:39

score 1 · Accepted Answer · answered Mar 13 '20 at 15:26

Implementing the changes proposed by matthias_h:

using class instead of id
using three argument form of on click handler
target the input by using $(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>

That's really helpful, i clearly understand what was the problem. Thanks — Zeeshan Shaheen, Mar 14 '20 at 09:03

Hide and Show button not working after appending

1 Answers1