Different behavoir after clicking button jQuery

Question

Im here again... Jquery noob. So I have this form that works with jQuery. The problem is that it has a different behaviour after clicking "Add".

https://jsfiddle.net/h4exrmdz/6/

Just try this to understand quickly:

• Select "Other" in the first select. You can see that a new form appears.
• Select "Option 1" now. You can see the form disappears.
• Click "Add".
• Select "Other" again in the first select. The new form doesnt appear anymore, even if you click "Remove". (It should work like before).

HTML

<table>
<th>
<p>Select <select autocomplete="off" name="custom_material_floor" id="custom_material_floor">
    <option value="1" selected="selected">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
    <option value="Other">Other</option>
</select>
<div id="custom_material_floorValue">
    Custom:
<form name="custom_material_floorValue" id="custom_material_floorValue">
      <input type="text" size="4">
    <input type="text" size="4">
    <input type="text" size="4">
    <input type="text" size="4">
    <input type="text" size="4">
    <input type="text" size="4">
    </form>
     </div>
</th>
<th>
<div class="input_fields_wrap">
    <button class="add_field_button">Add</button>
</div>
</th>
</table>

Script jQuery

$(document).ready(function()
              {$("#custom_material_floor").change(function()
    {if($(this).val() == "Other")
    {$("#custom_material_floorValue").show();}
    else
    {$("#custom_material_floorValue").hide();}});
                  $("#custom_material_floorValue").hide();
});


$(document).ready(function() {
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></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
        Select <select name="username">\
        <option value="1">Option1</option>\
        <option value="2">Option2</option>\
        <option value="3">Option3</option>\
        <option value="4">Other</option>\
    </select><form class="custom_material" id="custom_material" style="display:none">\
      <input type="text" size="4">\
    <input type="text" size="4">\
    <input type="text" size="4">\
    <input type="text" size="4">\
    <input type="text" size="4">\
    <input type="text" size="4"></form>\
    <a href="#" class="remove_field">Remove</a></div>'); //add form
    $("select").off("change");
  $("select").on("change", function(e){
      var selEl = $(e.currentTarget);
      var inputSel = "form.custom_material";
      if (e.currentTarget.value == 4) {
        selEl.parent().find(inputSel).show();
      } else {
        selEl.parent().find(inputSel).hide();
      }
      });
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
    $(document).ready(function() {update();});
})

});

I suppose its easy but I dont know whats happening. Any idea?

Answer 1

If you see the code, you have a second onChange event at the lower part that fires for all the select controls that you have. Onload, it triggers the First onChange event, but after Add , the event triggered is now the second onChange event.

First onChange event:

  $("#custom_material_floor").change(function() {
    if ($(this).val() == "Other") {
      $("#custom_material_floorValue").show();
    } else {
      $("#custom_material_floorValue").hide();
    }
  });

Second onChange event:

  $("select").on("change", function(e) {
    var selEl = $(e.currentTarget);
    var inputSel = "form.custom_material";
    if (e.currentTarget.value == 4) {
      //alert("other clicked");
      selEl.parent().find(inputSel).show();
    } else {
      //alert("option clicked");
      selEl.parent().find(inputSel).hide();
    }
  });

Answer 2

Here is the code working properly if any interested:

https://jsfiddle.net/h4exrmdz/10/

Script jQuery

$(document).ready(function()
              {$("#custom_material_floor").change(function()
    {if($(this).val() == "Other")
    {$("#custom_material_floorValue").show();}
    else
    {$("#custom_material_floorValue").hide();}});
                  $("#custom_material_floorValue").hide();
});


$(document).ready(function() {
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></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
        Select <select class="additional_custom"  name="username">\
        <option value="1">Option1</option>\
        <option value="2">Option2</option>\
        <option value="3">Option3</option>\
        <option value="4">Other</option>\
    </select><form class="custom_material" id="custom_material" style="display:none">\
      <input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4"></form>\
<a href="#" class="remove_field">Remove</a></div>'); //add form
    $(".additional_custom").off("change");
  $(".additional_custom").on("change", function(e){
      var selEl = $(e.currentTarget);
      var inputSel = "form.custom_material";
      if (e.currentTarget.value == 4) {
        //alert("other clicked");
        selEl.parent().find(inputSel).show();
      } else {
        //alert("option clicked");
        selEl.parent().find(inputSel).hide();
      }
      });
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
    $(document).ready(function() {update();});
})

});