javascript - 使 div 内容持久化

Question

我有一个有趣的问题，如果可能的话，我希望得到一些帮助。

我有以下 HTML 片段:

<div id="main_">
<ul class="unstyled">
    <ui:repeat var="adultPassenger" varStatus="adult" value="#{bean.adultPassengers}">
        <li>
            <div id="adult#{adult.index}" class="hitbox_">
                <div id="passengerTitle">Adult #{passengerDetailsBean.getPassengerCount(adult.index)}</div>
            </div>

            <div class="hide">
                <div id="adult#{adult.index}_form">
                    <div>
                        <div>
                            <div class="pull-left" style="width: 50%;">
                                <div><h:inputText value="#{adultPassenger.firstName}" class="pasFirstName_adult#{adult.index}" label="First Name"></h:inputText></div>
                            </div>
                            <div class="button-container">
                                <h:commandButton value="Continue" styleClass="btn btn-warning btn-large btn-block" onclick="handleDetailsClick('adult#{adult.index}')"></h:commandButton>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ui:repeat>
</ul>
</div>

和

<div id="secondary_" class="hide">
    <table>
        <tbody>
            <tr>
                <td">
                    <h:commandButton id="secondaryBack" value="Back" styleClass="btn btn-warning">
                    </h:commandButton>
                </td>
                <td class="secondaryTitle">
                    <h3 class="page-title orange-title-big">Passenger Details</h3>
                </td>
            </tr>
        </tbody>
    </table>

    <div id="secondaryContents">

    </div>
</div>

它们都在同一页上，当一个 div 可见时，另一个不可见。事情是。这是我目前正在使用的 JS:

$(".hitbox_").click(function() {
    var round = Math.round;
    var id = $(this).attr("id");

    window.alert(id);

    var f = $("pasFirstName_"+id).get();
    console.log("name " + f.value);

    // set contents of secondary div
    var passengerDetails = $("#" + id + "_form").html();
    $("#secondaryContents").html(passengerDetails);

    $("#main_").toggleClass("hide");
    $("#secondary_").toggleClass("hide");
});

function handleDetailsClick(index) {
    var passengerDetails = $("#" + index + "_form").html();
    $("#secondaryContents").html(passengerDetails);

    $("#main_").toggleClass("hide");
    $("#secondary_").toggleClass("hide");
}

我想要的(并尝试过但未成功): 单击第一个 div 时，它会隐藏，第二个 div 在填充第一个 div 中的隐藏表单后显示。我这样做是为了保留类名等，因为这样的形式可能不止一种。

当点击“继续”时，第二个 div 被隐藏，它的内容传回第一个 div - 我这样做是为了保留在表单中输入的详细信息。

我的问题是细节不持久。当在之前填写表单后再次单击同一个 div 时，它应该是包含之前输入的详细信息的表单。

这是出了问题的地方，因为表单中从来没有详细信息。

有谁知道我可能做错了什么？

Answer 1

问题出在下面几行

var passengerDetails = $("#" + id + "_form").html();

$("#secondaryContents").html(passengerDetails);

在这里，您获取一个 div 的 HTML 并将其添加到另一个。虽然这肯定会在目标 div 中创建相同的 html，但它不会保留任何用户输入的值以及元素上绑定(bind)的任何事件。

相反，您应该获取元素并将其附加到目标

var passengerDetails = $("#" + id + "_form").children();
$("#secondaryContents").append(passengerDetails);