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中。虽然这肯定会在目标div中创建相同的html，但它不会保留任何用户输入的值以及绑定在元素上的任何事件。

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

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

使div内容持久化

1 个答案: