jquery通過選擇一個選項更新輸入字段的值

Question

jquery動態添加兩個輸入字段和一個選擇字段。它應該更新名爲「hidden_​​name」的字段中所選選項的值。它適用於靜態字段，但不能按預期工作：

jQuery(document).ready(function($) { 


    $("#add").click(function() { 
     var intId = $("#buildyourform div").length + 1; 
     var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\" />"); 
     var fName = $("<input type=\"text\" class=\"fieldname\" name=\"values[]\" />"); 
     var fType = $("<select name=\"values\" class=\"extra_tab_list fieldtype\"> <optgroup label=\"Social Items\"><option value=\"fa-adn\" data-icon=\"fa-adn\">Adn</option> <option value=\"fa-android\" data-icon=\"fa-android\">Android</option> <option value=\"fa-apple\" data-icon=\"fa-apple\">Apple</option> <option value=\"fa-bitbucket\" data-icon=\"fa-bitbucket\">Bitbucket</option> <option value=\"fa-bitbucket-square\" data-icon=\"fa-bitbucket-square\">Bitbucket</option> <option value=\"fa-bitcoin\" data-icon=\"fa-bitcoin\">Bitcoin</option> <option value=\"fa-btc\" data-icon=\"fa-btc\">Btc</option> <option value=\"fa-css3\" data-icon=\"fa-css3\">Css3</option> <option value=\"fa-dribbble\" data-icon=\"fa-dribbble\">Dribbble</option> <option value=\"fa-dropbox\" data-icon=\"fa-dropbox\">Dropbox</option> <option value=\"fa-facebook-square\" data-icon=\"fa-facebook-square\">Facebook</option> <option value=\"fa-flickr\" data-icon=\"fa-flickr\">Flickr</option> <option value=\"fa-foursquare\" data-icon=\"fa-foursquare\">Foursquare</option> <option value=\"fa-github-square\" data-icon=\"fa-github-square\">Github</option> <option value=\"fa-gittip\" data-icon=\"fa-gittip\">Gittip</option> <option value=\"fa-google-plus-square\" data-icon=\"fa-google-plus-square\">Google Plus</option> <option value=\"fa-html5\" data-icon=\"fa-html5\">Html5</option> <option value=\"fa-instagram\" data-icon=\"fa-instagram\">Instagram</option> <option value=\"fa-linkedin-square\" data-icon=\"fa-linkedin-square\">Linkedin</option> <option value=\"fa-linux\" data-icon=\"fa-linux\">Linux</option> <option value=\"fa-maxcdn\" data-icon=\"fa-maxcdn\">Maxcdn</option> <option value=\"fa-pagelines\" data-icon=\"fa-pagelines\">Pagelines</option> <option value=\"fa-pinterest-square\" data-icon=\"fa-pinterest-square\">Pinterest</option> <option value=\"fa-renren\" data-icon=\"fa-renren\">Renren</option> <option value=\"fa-skype\" data-icon=\"fa-skype\">Skype</option> <option value=\"fa-stack-exchange\" data-icon=\"fa-stack-exchange\">Stack Exchange</option> <option value=\"fa-stack-overflow\" data-icon=\"fa-stack-overflow\">Stack Overflow</option> <option value=\"fa-trello\" data-icon=\"fa-trello\">Trello</option> <option value=\"fa-tumblr-square\" data-icon=\"fa-tumblr-square\">Tumblr</option> <option value=\"fa-twitter-square\" data-icon=\"fa-twitter-square\">Twitter</option> <option value=\"fa-vimeo-square\" data-icon=\"fa-vimeo-square\">Vimeo</option> <option value=\"fa-vk\" data-icon=\"fa-vk\">Vk</option> <option value=\"fa-waze\" data-icon=\"fa-waze\">Waze</option> <option value=\"fa-weibo\" data-icon=\"fa-weibo\">Weibo</option> <option value=\"fa-windows\" data-icon=\"fa-windows\">Windows</option> <option value=\"fa-xing-square\" data-icon=\"fa-xing-square\">Xing</option> <option value=\"fa-youtube-play\" data-icon=\"fa-youtube-play\">Youtube</option></optgroup><optgroup label=\"Misc\"><option value=\"fa-envelope\" data-icon=\"fa-envelope\">Email</option><option value=\"fa-phone-square\" data-icon=\"fa-phone-square\">Contact</option><option value=\"fa-address-card\" data-icon=\"fa-address-card\">Address</option><option value=\"fa-star\" data-icon=\"fa-star\">Custom</option></optgroup></select><input type=\"text\" class=\"hidden_name\" placeholder=\"Selected Value Will be Here\" name=\"hidden_values[]\" />"); 
     var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />"); 
     removeButton.click(function() { 
      $(this).parent().remove(); 
     }); 
     fieldWrapper.append(fName); 
     fieldWrapper.append(fType); 
     fieldWrapper.append(removeButton); 
     $("#buildyourform").append(fieldWrapper); 
    }); 


    $('.extra_tab_list').change(function() { 
     $(this).closest('.fieldwrapper').find('.hidden_name').val($('option:selected', this).data('icon')); 
    }); 



}); 

可以在此處看到工作示例; JsFiddle Demo

Answer 1

動態創建的元素，你必須使用.on("event", handler)，而不是直接附着事件，所以代碼更改爲：

$(document).on('change','.extra_tab_list',function() { 
     $(this).closest('.fieldwrapper').find('.hidden_name').val($('option:selected', this).data('icon')); 
    }); 

，它應該工作。

約VS .event。對（ '事件'）之間的區別更多詳細資料（）檢查此鏈接：Difference between .on('click') vs .click()

Answer 2

使用委託模型

html--

<select name="hello" id="txtSelect"> 
     <option value="1">A</option> 
     <option value="2">B</option> 
     <option value="3">C</option> 
    </select> 
    </br> 
    Value:<input type="text" val="" id="selectedValOpt"/> 

JS -

$(document).on('change','#txtSelect',function(event){ 
    var selected = $('#txtSelect').val(); 
    $('#selectedValOpt').val(selected); 
    console.log(selected) 
})