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，函数是否可以循环？

LINK：http://jsfiddle.net/rizalfarez/V5AdP/3/

Answer 1

由于这些元素是动态创建的，因此您需要将事件委托为

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

Answer 2

文本框的值未更新的原因是因为它们是动态创建的，因此更改事件不会绑定到它们。

我已经更改了您的代码并对其进行了优化：

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

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

2 个答案: