javascript - 当您从列表中选择时，Jquery 动态添加字段

Question

需要帮助来完成字段的动态添加。我有 HTML 下拉列表。

<div class="input_fields_wrap">           
<select id="list1" name="mytext[]">
        <option value="First">First</option>
        <option value="Second">Second</option>
        <option value="Third">Third</option>
        <option value="addq">Add your question</option>
</select>
<div id="youq">
<!-- You Question field --> 
</div>
</div>
    <a class="add_field_button">+ Add new question</a>

和Jquery代码

//---- Add field script ----//
$(document).ready(function() {
var max_fields      = 3;
var wrapper         = $(".input_fields_wrap"); 
var add_button      = $(".add_field_button");  
var x = 1;
$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++; 
        $(wrapper).append('<div><select name="mytext[]"><option value="First">First</option><option value="Second">Second</option><option value="Third">Third</option><option value="addq">Add your question</option></select><a href="#" class="remove_field">Remove</a></div>');
    }
});

$(wrapper).on("click",".remove_field", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); x--;})
});

//Add question fields
$('#list1').change(function(){
    if($("#list1").val() == 'addq'){            
    $('#youq').html("<input class='youquestion' placeholder='Input you     question'/>");
    }
 else {$('#youq').html("");};
});

完成所有这些都是为了能够从列表中选择问题或添加您自己的问题。 通过单击“+ 添加新问题”添加下拉列表效果很好。 但是，当您从列表中选择“添加您的问题”时，我在添加文本框时遇到问题。 如果您从第一个列表中选择它，则会显示该字段。 但是，如果您单击“+ 添加新问题”并在新列表中选择“添加您的问题”，则不会显示新文本字段。 请帮助我。

jsfiddle

编辑

Answer 1

你必须使用.live():

$("select").live('change', function(){
    if($(this).val() == 'addq'){ 
        $(this).next().append("<input class='youquestion' placeholder='Input you question'/>");
    }
 });

您可以检查以下 fiddle 。

http://jsfiddle.net/zpgvLk05/6/