Question

我又来了...... Jquery noob。所以我有这个与jQuery一起使用的表单。问题是单击“添加”后它有不同的行为。

试着快速理解：

在第一个选择中选择“其他”。您可以看到显示新表单。
立即选择“选项1”。你可以看到表格消失了。
点击“添加”。
在第一个选择中再次选择“其他”。即使您单击“删除”，新表单也不会再出现。（它应该像以前一样工作）。

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>

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

});

我想它很容易，但我不知道发生了什么。有什么想法吗？

Answer 1

如果您看到代码，则会在下半部分发生第二个onChange事件，该事件会触发您拥有的所有选择控件。 Onload会触发第一个Add事件，但在onChange之后，触发的事件现在是第二个onChange事件。

第一次$("#custom_material_floor").change(function() { if ($(this).val() == "Other") { $("#custom_material_floorValue").show(); } else { $("#custom_material_floorValue").hide(); } });事件：

onChange

第二次$("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(); } });事件：

cat

Answer 2

如果感兴趣的话，以下代码正常工作：

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

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

});

单击按钮jQuery后不同的行为

2 个答案: