Question

我已经构建了一个发票应用程序，它可以动态添加行。

这是生成行的代码：

$("#addrow").click(function(){
    $(".item-row:last").after('<tr class="item-row"><td><div class="inp"><input type="file" class="fileUpload"/><img id="myImg" src="#" alt="your image" /></div></td><td class="item-name"><div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea></textarea></td><td><textarea class="cost">$</textarea></td><td><textarea class="qty"></textarea></td><td><span class="price">$0</span></td></tr>');
    if ($(".delete").length > 0) $(".delete").show();
    bind();
});

这是显示图像的输入按钮代码：

<script type="text/javascript">
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
    };
</script>

因此，当您看到问题出在图像ID和按钮上时，如何为新行中的每个图像和按钮生成ID？

Answer 1

看到图像就在按钮之后，只需选择它并忘记id。

public static void main(String args [])

$(function () {
    $("#items").on('change', ':file', function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            var $button = $(this);
            reader.onload = function(e) {
              $button.next().attr('src', e.target.result);
            };
            reader.readAsDataURL(this.files[0]);
        }
    });
});

为动态创建的内容生成新的唯一ID

1 个答案: