如何使用 jQuery 访问 JavaScript 构建的元素？答案

【问题标题】：How to access JavaScript built elements using jQuery?如何使用 jQuery 访问 JavaScript 构建的元素？
【发布时间】：2017-07-17 15:35:12
【问题描述】：

我想在我的应用程序中创建一个文件上传功能。通常我的表单包含 1 个文件字段。但我想让用户在需要时拥有更多。所以我以这种方式创建了它：

HTML

<div class="att" id="c1">
    <input type="file" name="c1" size="200" /><br>
    <input type="button" value="Add more files" id="more" />
</div>

jQuery

$('#more').on('click',function(){
    q = $('.att').length;
    c = $('#c1').html();
    n = q + 1;
    f = c.replace('c1','c'+n);
    $('#c'+q).after('<div>'+f+'</div>');
})

你可以看到我的代码现场演示here。

到目前为止，一切正常。但是我遇到的问题是访问新的 JavaScript 构建元素来命名它们。我需要具有名称如 c1、c2、c3 的文件字段......但所有新创建的元素都将它们的名称命名为“c2”。看来我的代码在计算“.att”元素的长度时存在一些问题，因为其中只有一个是 HTML 原生元素，而其他的则是用 JavaScript 构建的。

你有什么想法吗？

【问题讨论】：

$('.att').length 将始终为 1.. 你没有附加 <div class="att" id="c1"> 元素..
委托事件处理是你所需要的，我认为
@JaromandaX 委托需要做什么？
也许没什么，我看错了问题的标题
@Ouroborus，在页面中查找 "id="c1""..

标签： javascript jquery html dom element

【解决方案1】：

正如@Rayon 所说，您正在使用 jQuery 获得innerHTML

c = $('#c1').html();

你必须得到outerHTML 才能拥有这些属性。你需要正则表达式替换/c1/g 来替换所有出现的字符串。你的代码应该是这样的：

$('#more').on('click',function(){
    q = $('.att').length;
    c = $('#c1')[0].outerHTML;
    n = q + 1;
    f = c.replace(/c1/g,'c'+n);
    $('#c'+q).after(f);
})

【讨论】：

【解决方案2】：

正如 Rayon 和其他人之前指出的那样；问题是通过调用.html()，我们得到了 DOM 元素的内部 html，而不是那个特定 DOM 元素的 html。所以每次只添加文件元素而不是它的容器元素。因此$('.att').length 返回的计数为 1。为了克服这个问题，您可以尝试以下代码：

$(document).ready(function(){
  $('#more').on('click',function(){
        q = $('.att').length;
        c = $('#c1').html();

        n = q + 1;
        f = c.replace('c1','c'+n);

        $('#c'+q).after('<div class="att" id="c'+n+'" >'+f+'</div>'); //instead of putting new file element in blank div; lets add attrs like class and id to it

    })
})

【讨论】：

【解决方案3】：

如下更新您的输入似乎是一个更好的主意：

<input type="file" id="fileUpload" multiple />

并在发布时以编程方式使用FormData() 重命名您的文件。

看看https://developer.mozilla.org/en/docs/Web/API/FormData

【讨论】：

好主意阿米尔。但这不是我问题的答案。还是谢谢你。

【解决方案4】：

您需要进行小修正，以便将 class 和 id 添加到您正在添加的新 div 中

    $('#c'+q).after('<div class="att" id="c'+n +'">'+f+'</div>');

更正示例

$('#more').on('click',function(){
        q = $('.att').length;
        c = $('#c1').html();
        n = q + 1; 
        f = c.replace('c1','c'+n);
        $('#c'+q).after('<div class="att" id="c'+n +'">'+f+'</div>');  console.log(f);
    })

input[type=file] {
  border: 1px solid silver;
  margin-bottom:5px;
  padding: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="att" id="c1">
    <input type="file" name="c1" size="200" />
</div>
<br>
<input type="button" value="Add more files" id="more" />

【讨论】：

【解决方案5】：

$('#more').on('click', function() {
  var q = $('.att').length;
  c = $('[name="c1"]').clone().get(0).outerHTML;
  n = q + 1;
  f = c.replace('c1', 'c' + n);
  $('#c' + q).after('<div class="att" id="c'+n+'">' + f + '</div>');
});

input[type=file] {
  border: 1px solid silver;
  margin-bottom:5px;
  padding: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="att" id="c1">
  <input type="file" name="c1" size="200" />
  <br>

</div>
<input type="button" value="Add more files" id="more" />

【讨论】：