當您從列表中選擇時，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動態添加字段

回答

相關問題