将输入类型文件的值粘贴到输入类型文本

Question

我有这样的脚本，用于追加基于新元素的用户输入

var tmp;
$('#add').click(function(){

            var galer=parseInt($('#many').val());

                for(var h=1;h<=tmp;h++){
                    $(".af_"+h).remove();                       
                }

                for(var x=1;x<=galer;x++){
                    $("#kontenPlus").append("<input type='file' id='photo_"+x+"'> <input type='text' id='src_"+x+"'>");

                }

                tmp=galer;                  

       });

for(var u=1;u<=tmp;u++){            
    $('#photo_'+u).change(function(){
            $('#src_'+x).val($(this).val());
    });
}

此html代码：

<input type='text' id='many'><div id='add'>Add element</div>
<div id='kontenPlus'></div>

我想问为什么'#photo_+x'值不放在'#src_'+x ，函数可以循环吗？

链接： http ： //jsfiddle.net/rizalfarez/V5AdP/3/

Answer 1

因为这些元素是动态创建的，所以您需要委派事件监听，例如

$(window).on( "change", function() {
    // 
    var id = $(this).id;
    //
    if (id.indexOf("photo") === 0) {

Answer 2

文本框的值不被更新的原因是因为它们是动态创建的，所以change事件不会绑定到它们。

我已经更改了代码并对其进行了优化，如下所示：

var tmp;
$('#add').click(function(){
    var galer = parseInt($('#many').val());

    $('.af').remove();                       

    for(var x=1;x<=galer;x++)
        $('#kontenPlus').append('<div class="af"><input type="file" id="photo_'+x+'"><input type="text" id="src_'+x+'"></div>');

    $('[id^="photo_"]').each(function(){
        $(this).change(function(){
            $(this).next().val($(this).val());
        });
    });
});