Javascript 我正在进行实时搜索，然后单击按钮刷新页面。如何防止这种情况？

我在一个页面上工作，我可以搜索一个名字或姓氏，并积极过滤（这部分工作完美）。找到相关记录后，我需要能够使用与记录相关的四个按钮之一完成操作。所有这些都需要在不刷新页面的情况下工作（因此我使用ajax）。如果我不搜索并单击四个按钮中的一个，它将正常工作，我会在页面顶部收到警报，而不进行任何刷新，但当我进行搜索并尝试刷新页面时，我不会在页面顶部收到警报，我的搜索将被清除。我以前也提交过其他意见书，没有人帮过我，所以我真的希望这次有人能帮我

我尝试了以下列出的解决方案：

类型=按钮：对于每个按钮-按钮在搜索选项中根本不起作用

对于上面的一个，我已经尝试在javascript中包含一个提交操作——它仍然不起作用

e、 stopPropagation（）：页面仍会刷新

使用$\u会话['msg']：不显示非搜索选项的警报，并刷新搜索选项的页面，因此我的搜索仍被清除

我的代码如下：

搜索页面

<?php
include("includes/header.php");
if (isset($_GET['event_id'])) {
    $event_id = $_GET['event_id'];
    $event = new Event($con, $userLoggedIn);
    $eventname = $event->getEventName($event_id);
    $table = $event->getTableName($event_id);
    $guest = new Guest($con, $userLoggedIn);
    // echo "<script>console.log(" . $eventname . ")</script>";
}

$stmt = $con->prepare("SELECT * FROM " . $table);
$stmt->execute();
$result = $stmt->get_result();

?>

<div class="flex-container">
    <div class="stats_details column">
        **... code not related to the question**

    </div>

    <div class="main_column column">
        <?php
        if (isset($_SESSION['msg'])) {
            echo  $_SESSION['msg'];
            unset($_SESSION['msg']);
        } ?>
        <div id="message"></div>
        <hr>
        <div class="form-inline">
            <label for="search" class="font-weight-bold lead text-dark">Search Record &nbsp; </label>
            <input type="text" name="search" id="search_text" class="form-control form-control-lg rounded-0 border-primary" placeholder="Search...">
        </div>
        <hr>
        <div class="cards-list" id="table-data">
            <?php while ($row = $result->fetch_assoc()) { ?>
                <div class="card m-2">
                    <div class="card-header <?= $row['checkin_guests'] > 0 ? 'success' : 'deep_blue'; ?> text-muted">
                        Guests: <?= $row['total_guests']; ?> | Checkedin: <?= $row['checkin_guests']; ?>
                    </div>
                    <div class="card-body">
                        <div class="card-title h3"><i class="fas fa-user"></i>&nbsp;<?= $row['first_name']; ?> <?= $row['last_name']; ?></div>
                        <p class="card-text"><i class="fa fa-building" aria-hidden="true"></i> &nbsp;<?= $row['company']; ?></p>
                        <p class="card-text"><i class="fa fa-at" aria-hidden="true"></i> &nbsp;<?= $row['email']; ?></p>
                        <p class="card-text"><i class="fa fa-phone" aria-hidden="true"></i> &nbsp;<?= $row['phone']; ?></p>
                    </div>
                    <div class="card-footer default text-muted">
                        <form action="" method="POST" class="action_buttons">
                            <input type="hidden" class="gid" value="<?= $row['id']; ?>">
                            <button class="btn success checkin" data-toggle="tooltip" data-placement="top" title="Checkin"><i class="fas fa-user-check" aria-hidden="true"></i></button>
                            <button class="btn warning" data-toggle="tooltip" data-placement="top" title="Checkout" name="Checkout"><i class="fas fa-user-times" aria-hidden="true"></i></button>
                            <button class="btn info" data-toggle="tooltip" data-placement="top" title="Edit" name="Edit"><i class="fas fa-user-edit" aria-hidden="true"></i></button>
                            <button class="btn danger" data-toggle="tooltip" data-placement="top" title="Cancel" name="Cancel"><i class="fas fa-user-slash" aria-hidden="true"></i></button>
                        </form>
                    </div>
                </div>
            <?php
            }
            ?>
        </div>

    </div>
</div>

</div>
<script type="text/javascript">
    $(document).ready(function() {
        var event = <?php echo $event_id; ?>;


        
        //live search
        $("#search_text").keyup(function() {
            var search = $(this).val();

            $.ajax({
                url: 'action.php',
                method: 'POST',
                data: {
                    query: search,
                    event: event
                },

                success: function(response) {
                    $("#table-data").html(response);
                }
            });
        });

        //checkin

        $(".checkin").click(function(e) {
            e.preventDefault();
            $("#message").html('');
            var $form = $(this).closest(".action_buttons");
            var gid = $form.find(".gid").val();

            $.ajax({
                url: 'action.php',
                method: 'POST',
                data: {
                    gid: gid,
                    checkin: 'checkin',
                    event: event
                },

                success: function(response) {
                    $("#message").html(response);
                    window.scrollTo(0, 0);
                    
                }
            });
        });

    });
</script>

</body>

</html>

**... 与问题无关的代码**

搜索记录

|核对：



从您的解释中我得到的是，$（“.checkin”）。在执行搜索后单击“不工作”，这是因为当所有页面加载完毕时，javascript只工作一次。
当您进行搜索时，会出现一个新的按钮，并且不会再次调用javascript以在单击时进行按钮签入，这就是为什么单击时的按钮不起作用的原因

因此，我建议您对每个按钮使用解决方案1 Type=Button:
复制您的javascript$（“.checkin”）。单击，文档准备就绪，以及需要复制以进行签入的其他功能/包括单击工作到action.php

<script type="text/javascript">
    $(document).ready(function() {
        var event = <?php echo $event_id; ?>;

        //checkin

        $(".checkin").click(function(e) {
            e.preventDefault();
            $("#message").html('');
            var $form = $(this).closest(".action_buttons");
            var gid = $form.find(".gid").val();

            $.ajax({
                url: 'action.php',
                method: 'POST',
                data: {
                    gid: gid,
                    checkin: 'checkin',
                    event: event
                },

                success: function(response) {
                    $("#message").html(response);
                    window.scrollTo(0, 0);
                    
                }
            });
        });

    });
</script>

示例：将其复制到action.php

<script type="text/javascript">
    $(document).ready(function() {
        var event = <?php echo $event_id; ?>;

        //checkin

        $(".checkin").click(function(e) {
            e.preventDefault();
            $("#message").html('');
            var $form = $(this).closest(".action_buttons");
            var gid = $form.find(".gid").val();

            $.ajax({
                url: 'action.php',
                method: 'POST',
                data: {
                    gid: gid,
                    checkin: 'checkin',
                    event: event
                },

                success: function(response) {
                    $("#message").html(response);
                    window.scrollTo(0, 0);
                    
                }
            });
        });

    });
</script>

按钮：

<button onClick="checkinButton()" class="btn success checkin" data-toggle="tooltip" data-placement="top" title="Checkin"><i class="fas fa-user-check" aria-hidden="true"></i></button>


您到底想实现什么目标？如果您的用户重新加载页面，他将重新加载页面-是否要阻止此操作？您的意思是$（“.checkin”）。在搜索筛选器后单击“不工作”？@NicoHaase当页面刷新时，这意味着搜索字段被清除，您需要从头开始搜索-而且消息不会显示，因此用户不会收到已完成操作的警报。@RonnySulistio在搜索筛选器后，它没有按照我的要求工作。
} -> end  document ready 
function checkinButton(){


        var $form = $(this).closest(".action_buttons");
        var gid = $form.find(".gid").val();

        $.ajax({
            url: 'action.php',
            method: 'POST',
            data: {
                gid: gid,
                checkin: 'checkin',
                event: event
            },

            success: function(response) {
                $("#message").html(response);
                window.scrollTo(0, 0);
                
            }
        });
}

<button onClick="checkinButton()" class="btn success checkin" data-toggle="tooltip" data-placement="top" title="Checkin"><i class="fas fa-user-check" aria-hidden="true"></i></button>