點擊按鈕後不同的行爲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();}); 
}) 

});