Question

所以即时尝试构建表单生成器的前端但是在尝试克隆可折叠元素时遇到了问题。我是jquery的绝对初学者，所以对于脏代码感到抱歉。克隆元素并使用修改后的可排序jquery插件嵌套在其自身下时，任何一个底层可折叠的将打开顶级父级的可折叠（但不会打开任何其他嵌套元素）。

我的jquery是：

var count = 1;
$("#displayUpload").click(function() {
    var clonecount = 'Uploadpanel' + count;
    var cloneobject = $("#toggleUpload").clone(true).appendTo(".sortable").show();
    $("#Uploadpanel", cloneobject).attr('id', clonecount);
    $(cloneobject, this.id).on("click", (".edit", ".panel-title"), function() {
        $("#" + clonecount, this.id).collapse('toggle');
    });
    $(cloneobject).on("click", ".remove", function() {
        $(cloneobject).remove();
    });
    count = count + 1;
});

HTML：

<li id="toggleUpload" data-role="main" class="js-form-element" style="display: none">
    <div>
        <div class="panel panel-default" data-role="collapsible" id="panel3">
            <div class="panel-heading">
                <h4 class="panel-title" data-target="#Uploadpanel"
                    href="#Uploadpanel">
                    <a data-target="#Uploadpanel"
                        href="#Uploadpanel" class="edit">
                    File upload
                    </a>
                    <span class="btn-group pull-right">
                    <a data-target="#Uploadpanel"
                        href="#Uploadpanel" class="collapsed">Edit</a>
                    <span class="padding-line">|</span>
                    <a class="remove" href="#">Delete</a>
                    </span>
                </h4>
            </div>
            <div id="Uploadpanel" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="margin-bottom-20">
                        <p class="font-italic">Label:</p>
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="Label">
                    </div>
                    <div class="margin-bottom-20">
                        <p class="font-italic">Placeholder text:</p>
                        <input type="text" class="form-control" placeholder="Placeholder message">
                    </div>
                    <div class="margin-bottom-5">
                        <div class="checkbox">
                            <label>
                            <input id="required" type="checkbox"> Required
                            </label>
                        </div>
                    </div>
                    <div class="margin-bottom-20">
                        <p class="font-italic">Validation message:</p>
                        <input type="text" class="form-control" id="validation" placeholder="Validation message">
                    </div>
                    <div>
                        <div class="row">
                            <div class="col-sm-6">
                                <p class="font-italic">Form input size:</p>
                                <div class="form-group">
                                    <select name="form_select">
                                        <option value="0">100% (1 in a row)</option>
                                        <option value="0">33% (3 in a row)</option>
                                        <option value="0">50% (2 in a row)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <p class="font-italic">Form position:</p>
                                <div class="form-group">
                                    <select name="form_select">
                                        <option value="0">Left</option>
                                        <option value="0">Middle</option>
                                        <option value="0">Right</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>

任何帮助都会很棒，感谢

Answer 1

在已有事件处理程序的对象上使用clone可能会出现一些问题。我有一段时间没有这个问题，我只是通过创建一个生成新jQuery对象的函数来解决它，而不是克隆现有的jQuery对象。

Jquery - 克隆可折叠的div

1 个答案: