javascript - 无法将 HTML 和值克隆到 jQuery Datatables 1.10 中

Question

这个问题已被问过几次，例如:

Store Cloned Element in Variable

Copy DOM Element

但是，我在选择 <div id="XYZ"></div> 时遇到问题并将其克隆到 jQuery DataTable fnStateSaveParams 的变量中保存。当页面刷新时，它意味着通过 fnStateLoadParams 将克隆的对象重新加载回 HTML。 。我正在尝试使用 .clone()超过.html()因为我还需要存储在动态生成的文本框中的值。

如果我不通过数据表插件保存和加载，那么它可以完美工作。一旦我尝试调用类似于下面的代码，它就会停止工作(请记住我已经尝试了下面代码的许多变体)。有人有什么想法或建议吗？

"fnStateSaveParams": function (oSettings, oData) {
    var clonedHtml= $("#XYZ").clone(true);
    oData.storedHtml = clonedHtml;
},
"fnStateLoadParams": function (oSettings, oData) {
    //$("#displayHtml").append(oData.storedHtml);
    //$("#displayHtml").html(oData.storedHtml);
    //$(oData.storedHtml).prependTo("#displayHtml")
}

<div id="XYZ">
    <div data-template="">
        <label class="bolder"></label>

        <div class="input-append">
            <div class="inline-block advancedSearchItem">
                <input type="text" id="test1" value="Test Scenario" />
            </div>

            <a href="#" data-id="" class="btn btn-small btn-danger removeField">
                <div class="hidden-phone">Remove</div>
                <i class="icon-trash icon-only hidden-tablet hidden-desktop"></i>
            </a>
        </div>
    </div>
</div>

最终场景会更复杂，但是上面是我试图创建的最简单的形式。如果您需要更多信息，请随时询问，我会相应更新问题。

Answer 1

我没有找到利用 .clone() 获取所有 HTML 和文本框值的方法。不过，我确实想出了一个解决方案，下面的代码可供任何需要引用点的人使用。

使用 .html() (大多数人都知道)只会复制可用的 HTML，而忽略文本字段中本质上“占位符”文本的内容。不过，我的解决方案是将 value 强制写入 HTML，而不是将其视为“占位符”文本，这样可以在加载页面时再次使用它。

$(document).on("click", "#advancedSearchButton", function(event) {
    event.preventDefault();

    // DO SOME STUFF HERE

    $("[data-value]").each(function(index) {
        if (index > 0) {
            fieldCount++;
            $(this).attr("value", $(this).val());
        }
    });

    oTable.fnFilter("");
});

function loadData() {
    // ... ... ...
    "fnStateSaveParams": function(oSettings, oData) {
        oData.advancedSearchHtml = $("#addedSearchFields").html();
        oData.fieldCount = fieldCount;
        oData.isAdvancedSearch = isAdvancedSearch;
    },
    "fnStateLoadParams": function(oSettings, oData) {
        $("#addedSearchFields").html(oData.advancedSearchHtml);

        if (oData.isAdvancedSearch == true) {
            $("#collapseElement").removeClass("collapsed");
            $("#collapseIcon").removeClass().addClass("icon-chevron-up");
            $("#filter").hide();
        }

        isAdvancedSearch = oData.isAdvancedSearch;
        advancedSearchFields = oData.fieldCount;
    }
    // ... ... ...
}