javascript - jQuery 获取整个输入元素，包括它的值

Question

我有以下代码:

// Add a single component
$(document).on("click", ".copy-component .fa.fa-plus", function() {
    var component = $(this).closest(".one-component");
	var componentContainer = component.closest(".x_panel");

    componentContainer.append(component[0].outerHTML);
});

<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
    <div class="x_panel border-true">
        <div class="x_title component-field">...</div>
        <div class="one-component">
            <ul class="nav navbar-right panel_toolbox panel-row">...
        </div>
        <div class="x_content eight no-margin-top component-container">
            <form id="demo-form" data-parsley-validate="" novalidate="">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                        <label class="input-upper-title">Cum. Len. (ft)</label>
                            <div class="has-checkbox">
                               <input type="checkbox"><input disabled="disabled" type="text" id="" class="form-control">
                            </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">...</div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">...</div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">...</div>
                </div>
            </form>
        </div>
    </div>
</div>

这是它目前的样子: 如您所见，输入值未被复制。

第一行原本在那里，但第二行是通过单击底部的“添加”按钮动态添加的。

当我点击图标“+”(.fa.fa-plus)时，我想要添加一个新的组件，包括输入框里面的内容现在。

这是我想要的:

我如何修改我的 jQuery 代码来实现这一点？

Answer 1

您应该附加 .clone()元素，而不是获取 outerHTML 并附加它。

Create a deep copy of the set of matched elements.

componentContainer.append(component.clone(true));

$('button').click(function() {
  $('#a').clone().appendTo('div');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add</button>
<input id="a" />
<div>

</div>