Question

当我尝试将更多html内容包装或添加到jQuery选择器时，我正在获取[object Object]或[object HTMLInputElement]。

我试图：

复制输入字段
清除所有数据（保持id，类，类型等...）（火狐的问题是保留数据，为什么我手动清除了数据）
使用list标签包含输入并包含一个按钮（div元素）

我能够完成这项工作，我能够完成上述三件事中的任何两件事的组合（奇怪吧？）。主要问题是，当我使用我的所有三个步骤的代码时，我不断获得[object Object]或[object HTMLInputElement]。（我能够附加项目并修复了对象对象的问题，但后来我无法将其包装并添加按钮）。

这是我的HTML代码：

<section id="fileInputs">
    <li>
        <!-- Jquery looks for li to add more of these -->
        <input multiple name="filetoupload001" type="file">
        <div class="square clicked">
            <span class="plus"><i class="fa fa-plus plus"></i></span>
            <span class="minus"><i class="fa fa-minus minus"></i></span>
        </div>
    </li>
</section>

这是我的jQuery：

$(function() {
    $("#fileInputs").on("change", "input[type=file]", function() {
            var item = $(this).clone(false);
            //var item = $.extend({}, $(this) ); //Seems same results as clone

            item[0].name = "filetoupload002" //I have a function -> leftPad(i, 3);
            item[0].files[0] = ''; //Firefox fix/hack - Clear out those pesky file that shouldn't have copy over since .clone() not supoose to copy data
            item[0].value = '';

            var a = document.createElement('li');
            var b = item; // Shows [object Object]
            // var b = item[0]; // Shows [object HTMLInputElement]
            // var b = $.parseHTML(item); // null
            // var b = $.parseHTML(item[0]); // null
            // var b = '<input multiple name="filetoupload'+leftPad(i, 3)+'" type="file"></input> '; // Work Perfect!! However would like to use item insted
            var c = '<div class="square"><span class="plus"><i class="fa fa-plus plus"></i></span><span class="minus"><i class="fa fa-minus minus"></i></span></div></li>';

            a.innerHTML = b;
            a.innerHTML += c;

            $(this).parent().parent().append(a); // This is the end result I want however would like to use clone item instead of hard code html
        }
    });
});

我在这里待了几个小时，真的可以在这里使用一些帮助。与此同时，我将重新开始尝试：

包含一个输入和一个div（按钮）的复制列表
清除输入数据
在部分内输出屏幕上的新输入。

Answer 1

要遵循的更简单的模式是保持所有文件输入的名称相同，并通过服务器上的索引访问它们。这还可以避免在添加或删除新项目时必须维护增量名称的麻烦。然后，您只需复制已更改输入的父li即可。试试这个：

$("#fileInputs").on("change", "input[type=file]", function(){
    var $li = $(this).closest('li').clone();
    $li.find('input').prop({
        files: [],
        value: ''
    });
    $('#fileInputs').append($li);
});

Example fiddle

Answer 2

您正在为 b 获取[对象HTMLInputElement]，因为您尝试将JavaScript创建的对象添加到innerHTML而不是元素的HTML字符串。你可以使用outerHTML。

另外，请注意您需要从item获取原始DOM元素，因此您需要使用b = item [0]。

$(function() {
  $("#fileInputs").on("change", "input[type=file]", function () {
    var item = $(this).clone(true, true);

    item[0].name = "filetoupload002"//I have a function -> leftPad(i, 3);
    item[0].files[0] = ''; //Firefox fix/hack - Clear out those pesky file that shouldn't have copy over since .clone() not supoose to copy data
    item[0].value = '';

    var a = document.createElement('li'); // Element created using JavaScript    
    var b = item[0];            
    var c = '<div class="square"><span class="plus"><i class="fa fa-plus plus"></i></span><span class="minus"><i class="fa fa-minus minus"></i></span></div></li>';

    a.innerHTML += b.outerHTML;
    a.innerHTML += c;

    $(this).parent().parent().append(a);        
  });
});

JSFiddle：https://jsfiddle.net/cgv8runb/

将表单输入克隆为jQuery对象并使用wrap div / li显示它

2 个答案: