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

它应该可以工作。

有关 .on('event') 与 .event() 之间差异的更多详细信息，请查看此链接:Difference between .on('click') vs .click()