查找动态创建的输入答案

【问题标题】：Finding Dynamically created inputs查找动态创建的输入
【发布时间】：2014-05-12 09:40:36
【问题描述】：

我有一个动态创建的文本输入字段。数量取决于用户需要多少...

    <div id="dropdowncreate" >
        <div class="control-group" style="display:inline-block; vertical-align:top; width:250px;">
            <a href="#" class="nav" id="adddropdown" style="width:200px;">CREATE FIELD</a>
            <div id="adddropdownarea" class="controls" style="margin-left:10px; margin-bottom:10px; margin-top:10px;">
            </div>
            <a href="#" class="nav" id="subdrop" style="width:200px;" onclick="addDropDown()">ADD TO FIELD</a>
        </div>
</div>

        <script>
        $("#adddropdown").click(function(){
            var elem = $("<input/>",{
            type: "text",
            name: "dropdown_[]"
        });

        var removeLink = $("<span/>").html(" REMOVE</br>").click(function(){
            $(elem).remove();
            $(this).remove();
        });

        $("#adddropdownarea").append(elem).append(removeLink);
        });


        </script>

当我想选择并循环浏览所有输入以找到名为“下拉”的输入时，我的脚本只会找到在页面加载时创建的输入，而不是这些动态创建的输入。..

function addDropDown(){
    var elems = document.newlog.elements;
    var len = elems.length;
    var dropdowns = new Array();


        for ( var i = 0; i < len; i++ ) {
            if (elems[i].type === 'text') {
                dropdowns.push(elems[i].name);
            }
        }

    document.getElementById('ajaxfield').innerHTML = dropdowns;
    console.log(dropdowns);

}

如何获取函数 addDropDown() 来查找动态创建的输入？基本上，我想找到表单中的所有输入，我可以对它们进行排序和过滤——但是这个函数甚至看不到输入。

好的。所以从 Jquery 切换到 vanilla 似乎并不能解决问题......原始脚本（添加字段）到这个......

function adddroptext() {
            var dropdowntextinput=document.createElement('input');
            dropdowntextinput.type = "text";
            dropdowntextinput.name = "dropdown";
            document.getElementById('adddropdownarea').appendChild(dropdowntextinput);
        }

成功创建输入，但我仍然只能找到在页面加载时进行的文本输入。

相当多的搜索，但将 document.newlog.element 更改为 var elems = document.getElementsByTagName('input');成功了。

【问题讨论】：

这个“document.newlog”是什么意思？
当你之前使用 jQuery(?) 来创建它们时——那为什么在寻找它们时突然使用 vanilla JS 呢？
另外，我认为依赖innerHTML 通常是个坏主意。要么坚持使用 jQuery 附加元素（为了向后兼容），要么使用 Node.appendChild (developer.mozilla.org/en-US/docs/Web/API/Node.appendChild) 将实际元素添加到末尾。构建一个数组并像这样设置它运行起来非常慢，而且读起来也很奇怪。
document.getElementsByName('dropdown_[]') 或 $('input[name="dropdown_[]"]')。
newlog 只是表单的名称。我是新手——因为我找到了它，所以使用了 jquery——但你是对的，我应该自己学习如何做。我编写了查找输入的函数 - 我不知道两者之间存在不兼容问题？我想现在，我将专注于学习使用 vanilla javascript 创建输入 - 但我不确定这会解决我们将看到的问题。

标签： javascript dynamic input

【解决方案1】：

您可以在DOM 中使用document.getElementsByTagName('input')

$("#findInputTag").click(function(){
    alert("You have " + document.getElementsByTagName('input').length + " input tag");
});

Demo

【讨论】：