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()

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

jquery通过选择选项更新输入字段的值

2 个答案: