点击按钮后不同的行为jQuery

Question

我在这里再次... Jquery noob。所以我有这个与jQuery一起工作的表单。问题在于点击“添加”后它有不同的行为。

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

刚刚尝试这个快速了解：

• 选择 “其他” 的第一选择。你可以看到一个新的表单出现。
• 现在选择“选项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，它触发第一个onChange事件，但在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(); 
    } 
    }); 

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

});