flashter flashter - 4 months ago 6
HTML Question

Different behavoir after clicking button jQuery

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

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();
    }
  });