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

需要帮助完成字段的动态添加。我有HTML下拉列表。当您从列表中选择时，Jquery动态添加字段

<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

编辑

来源

2015-04-07 RQEST

1>首先当你点击** +添加新问题**，你不加入任何标识来选择标签。 2>即使你添加id，它应该是唯一的，否则它总是会首先选择id ** list1 ** – Abhi

据我了解这里的问题是，“变”事件的事件监听器只绑定到“＃列表1”的ID下拉，并通过.change约束（）方法，它只为现有DOM元素绑定侦听器。

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

来源

2015-04-07 12:14:15

你必须使用.live（）：

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

您可以检查以下的小提琴。

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

来源

2015-04-07 12:25:52

我已经更新了小提琴的代码。现在它工作正常。 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("");}; 
    });

来源

2015-04-07 13:57:38

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

回答

相关问题