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')); 
    }); 

그것은 작동합니다. 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 : .event 대 CSTE 연구진 ('이벤트')의 차이에 대한 자세한 내용은

()이 링크를 확인 -

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