Jquery函数只执行一次？ [重复]

问题描述：

This question already has an answer here:

Event binding on dynamically created elements? 23 answers

I'm trying to execute my Jquery so that the table will get updated every time the button is pressed.

test.php

<?php
    require 'mysql.php';
?>
<!-- HTML 5 declaration -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FYP LoRa Control Panel</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
        <!-- jQuery Script -->
        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
        </script>

        <script>
            // jQuery code
            // jQuery code available after the page has fully loaded
            $(document).ready(function(){
                var id = 0;
                var status = 'temp';

                $(":button").click(function(){
                    id = $(this).prop("id");
                    console.log('button ' + id + ' pressed');

                    if($(this).prop('value') == 'ON'){
                        status = 'OFF';
                    }else{
                        status = 'ON';
                    }

                    // load table with updated values
                    $('#tbody1').load("update-led.php", {
                        id: id,
                        status: status
                    }, function(){
                        console.log('table loaded');
                    });
                });        
            });
        </script>
    </head>
    <body>
        <div class="table">
        <table>
            <thead>
                <tr>
                    <th>No:</th>
                    <th>Name:</th>
                    <th>Status:</th>
                </tr>
            </thead>
            <tbody id='tbody1'>
                <?php
                    getValues();
                ?>
            </tbody>
        </table>
        </div>
    </body>
</html>

update-led.php

<?php
    require 'mysqldb.php';
    require 'mysql.php';

    $id = $_POST['id'];
    $status = $_POST['status'];

    /* start connection */
    $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

    /* check connection */
    if (mysqli_connect_errno()) {
        printf("Connection failed: %s
", mysqli_connect_error());
        exit();
    }

    $sql = "UPDATE led_control SET Status='$status' WHERE ID=$id";

    mysqli_query($conn,$sql);

    /* close connection */
    mysqli_close($conn);

    getValues();
?>

mysql.php This will create the table

<?php
    require_once 'mysqldb.php';

    function getValues(){
        /*
        This function retrieves the values from the database
        and store it in an array.
        */
        global $db_host, $db_user, $db_pass, $db_name;
        $data = array();

        /* start connection */
        $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

        /* check connection */
        if (mysqli_connect_errno()) {
            printf("Connection failed: %s
", mysqli_connect_error());
            exit();
        }

        $sql = 'SELECT * FROM led_control ORDER BY ID';
        if($query = mysqli_query($conn,$sql)){
            while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
                $data[] = $row;

                // Display into html table
                echo "<tr>";
                echo "<td>{$row['ID']}</td>";
                echo "<td>{$row['LED']}</td>";
                echo "<td>
                        <input type='button' id='{$row['ID']}' value='{$row['Status']}' name='{$row['ID']}'>
                    </td>";
                echo "</tr>";
            }

        /* free result set */
        mysqli_free_result($query);
        }

        /* close connection */
        mysqli_close($conn);
    }
?>

For now, it will only get executed once but I would want my function to be executed more than once. I tried to find solutions to my problem but to no avail. I would greatly appreciate any help given :)

</div>

答

I guess you have buttons loadded by ajax, first time they are loaded but the second time you get them thru ajax. In case to get event from this buttons you have to go different way like this:

$(".table #tbody1").on('click', ':button', function(){
                    id = $(this).prop("id");
                    console.log('button ' + id + ' pressed');

                    if($(this).prop('value') == 'ON'){
                        status = 'OFF';
                    }else{
                        status = 'ON';
                    }

                    // load table with updated values
                    $('#tbody1').load("update-led.php", {
                        id: id,
                        status: status
                    }, function(){
                        console.log('table loaded');
                    });
                });

Hope it helps.

Jquery函数只执行一次？ [重复]

相关推荐