显示后立即覆盖元素

Question

我想触发元素上的click事件，以便在文档从另一个文档中获取参数时显示列表：

{% include "header.phtml" %}

<div id="choix_type_reservation" class="tile-area padding10">
    <div class="tile-container">
        <div id="choix_salles" class="tile-large bg-crimson fg-white">
            <div class="tile-content"><?php echo _getText("reservation.choix.salles"); ?>
                <div class="image-container">
                    <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
                </div>
            </div>
        </div>
        <div id="choix_tables" class="tile-large bg-darkPink fg-white">
            <div class="tile-content"><?php echo _getText("reservation.choix.tables"); ?>
                <div class="image-container">
                    <div class="frame"><img src="<?php echo HTTP_IMG ?>table.png"/></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="liste_salles" class="tile-area padding10">
    <?php $nbSalles = 0; ?>
    <div style="font-size:20px;"><a href="#" data-role="icon-retour"><span class="mif-arrow-left mif-2x"></span></a></div><br />
    <div class="header fg-white"><?php echo _getText("reservation.choix.salles"); ?> ( <span id="stat_liste_salles_nb_salles"></span> )</div>
    <div class="tile-container" style="max-height: 324px;overflow: auto;">
        <?php
        $t_salle = new Salle();
        $salles = $t_salle->lireParCritere([]);
        foreach ($salles as $salle) {
            $nbSalles++;
        ?>
        <div id="salle_<?php echo $salle->salle_code; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square bg-crimson fg-white">
            <div class="tile-content"><?php echo $salle->salle_lib; ?>
                <div class="image-container">
                    <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
                </div>
            </div>
        </div>
        <?php
        }
        ?>
    </div>
    <script type="text/javascript">
        var stat_liste_salles_nb_salles = "<?php echo $nbSalles; ?>";
        $('#stat_liste_salles_nb_salles').html(stat_liste_salles_nb_salles);
    </script>
</div>

<div id="liste_tables" class="grid condensed">
    <div style="font-size:20px;"><a href="#" data-role="icon-retour"><span class="mif-arrow-left mif-2x"></span></a></div><br />
    <div class="row cells5">
        <div class="cell"><span class="header"><?php echo _getText("reservation.salle"); ?></span></div>
        <div class="cell colspan3"><span class="header"><?php echo _getText("reservation.choix.tables"); ?> ( <span id="stat_liste_tables_nb_tables"></span> )</span></div>
    </div>
    <div class="row cells5">
        <div class="cell">
            <div class="grid condensed" style="max-height: 324px;overflow: auto;">
                <?php
                $t_salle = new Salle();
                $salles = $t_salle->lireParCritere([]);
                foreach ($salles as $key => $salle) {
                ?>
                <div class="row">
                    <div class="cell">
                        <div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square bg-crimson fg-white">
                            <div class="tile-content"><?php echo $salle->salle_lib; ?>
                                <div class="image-container">
                                    <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php } ?>
            </div>
        </div>
        <div class="cell colspan3" style="max-height: 324px;overflow: auto;">
            <div id="tables"></div>
        </div>
    </div>
</div>

<div id="liste_reservations_salle" class="tile-area padding10"></div>

<div id="liste_reservations_table" class="tile-area padding10"></div>

<script type="text/javascript" charset="utf-8" language="javascript">

    var previous_screen = [];

    var salle_reserver = "";

    var table_reserver = "";

    function listerTables(salle_code) {

        var donne = "salle_code="+salle_code;

        var ret = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxListerTablesDansSalle",
                async: false
             }).responseText;

        $('#tables').html(ret);

        ret = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxGetNbTablesDansSalle",
                async: false
             }).responseText;

        $('#stat_liste_tables_nb_tables').html(ret);

    }

    function listerReservationsSalle(salle_code) {

        var donne = "salle_code="+salle_code;

        var salle_lib = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxGetSalleLib",
                async: false
             }).responseText;
        salle_lib = $.trim(salle_lib);

        var _titre = '<?php echo _getText("list.reservation.salle"); ?>';
        _titre = _titre.replace("%s", salle_lib);
        donne += "&titre="+_titre;

        var ret = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxGenerateListReservationSalle",
                async: false
             }).responseText;

        $('#liste_reservations_salle').show();
        $('#liste_reservations_salle').html(ret);

    }

    function listerReservationsTable(table_code) {

        var donne = "table_code="+table_code;

        var table_lib = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxGetTableLib",
                async: false
             }).responseText;
        table_lib = $.trim(table_lib);

        var _titre = '<?php echo _getText("list.reservation.table"); ?>';
        _titre = _titre.replace("%s", table_lib);
        donne += "&titre="+_titre;

        var ret = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxGenerateListReservationTable",
                async: false
             }).responseText;

        $('#liste_reservations_table').show();
        $('#liste_reservations_table').html(ret);

    }

    $(document).ready(function() {

        $("#cell-content > div").hide(); // vider l'écran ( content-page )

        $('#cell-content').addClass('bg-darkCobalt');

        $("#choix_type_reservation").show();

        /**
        *
        *    CHOIX RESERVATION
        *
        **/
        $("#choix_type_reservation").on("click", "#choix_salles", function(){
            previous_screen.push("#choix_type_reservation");
            $("#cell-content > div").hide();
            $("#liste_salles").show();
        });
        $("#choix_type_reservation").on("click", "#choix_tables", function(){
            previous_screen.push("#choix_type_reservation");
            $("#cell-content > div").hide();
            $("#liste_tables").show();
            listerTables($("#tile_salle_0").attr("data-pk")); // lister les tables de la première salle
        });

        <?php
        if (isset($from_reservation)) {
        ?>
                from_reservation = "<?php echo $from_reservation; ?>";
                window.location.href = "../RestaurantReservation";
                $("#choix_salles").click();
        <?php
        }
        ?>

    });
</script>

{% include "footer.phtml" %}

在运行时，列表#liste_salles会显示，但会立即被前面显示的div #choix_type_reservation覆盖。

那么如何解决呢？