0

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

我有以下 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 可见时，另一个 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 - 我这样做是为了保留在表单中输入的详细信息。

My problem is that the details don't persist. When the same div is clicked again after having filled in the form before, it should should the form with the details that were previously entered.

This is where something goes wrong because there are never details in the form.

Does anyone know what I could be doing wrong?

4

1 回答 1

1

The problem is in the following lines

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

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

Here, you are taking HTML of one div and adding it to another. While this will surely create the same html in target div, it will not retain any user entered values as well as any events bound on elements.

You should, instead, take the element and append it to target

var passengerDetails = $("#" + id + "_form").children();
$("#secondaryContents").append(passengerDetails);
于 2013-09-10T12:03:07.197 回答