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

所有这一切都是为了能够从列表中选择一个问题或添加自己的问题。点击＆＃34; +添加新问题＆＃34;添加下拉列表效果很好。但是当您选择＆＃34;添加问题时，我在添加文本框时遇到问题＆＃34;从列表中。如果从第一个列表中选择它，则会显示该字段。但是如果你点击＆＃34; +添加新问题＆＃34;并选择＆＃34;添加您的问题＆＃34;在新列表中是新文本字段不显示。请帮帮我。

jsfiddle

修改

Answer 1

你必须使用.live（）：

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

您可以查看以下小提琴。

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

Answer 2

据我所知，这里的问题是“change”事件的事件监听器仅绑定到带有“＃list1”id的下拉列表，并且它通过.change（）方法绑定，该方法仅为现有DOM绑定侦听器元件。

所以，你应该做的是更改“＃list1”选择器，以便它选择当前和新的下拉列表，例如，添加一个类，并更改将侦听器绑定到.on（）或.live的方法（）或.delegate（）（取决于你的jQuery版本），你可以在jQuery API页面上检查这些方法的文档，.on（）和.delegate（）使用方式有点不同，或者如果你不想检查它，只需将.change（）更改为.live（）。

Answer 3

我更新了您的小提琴代码。现在工作正常。的 View Demo

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

Jquery在从列表中选择时动态添加字段

3 个答案: