php - 如何通过 HTML 将 jQuery Ajax 调用与 PHP 给出的动态参数绑定(bind)

Question

我是 jQuery 新手 - 这是我第一次尝试...我已经研究了两天，但无法让它工作...

有一个由 PHP 动态创建的列表。如果用户单击带有 fontawesome-minus-icon 的 span 元素，则应向 API 触发 XHR 请求，从而删除单个条目。如果我使用按钮元素，该函数将按原样执行，但我不知道如何让它与动态添加的 ID 一起工作，以及如何将它们传递给 AJAX 查询..

许多尝试，包括函数、onclick 等，都不适合我......

HTML、Ajax 部分:

   <script charset="UTF-8" type="text/javascript">
        jQuery(document).ready( function($) {
            $("button").click(function (e) {
                var getthevalue = $(e).attr('id');
                alert(getthevalue);
                console.log("Abfrage ob LFZ geloescht werden soll.");
                swal({
                        title: "LFZ aus Flotte loeschen?",
                        text: "Das ausgewaehlte Luftfahrtzeug wirklich aus Ihrer persönlichen Flotte loeschen?",
                        type: "warning",
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, delete it!",
                        cancelButtonText: "No, cancel pls!",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    },
                    function () {

                        console.log("Starte XHR Request zum loeschen eines LFZ aus der eigenen Flotte");
                        $.post("http://____/fleetdb_removeFromOwnFleet.php",
                            {
                                userId: "<? echo $toolbox_user_id; ?>",
                                userPasswd: "<? echo getUserPasswd($toolbox_user_id); ?>",
                                lfzDbId: "lalala"
                            },
                            function(data,status){
                                alert("Data: " + data + "\nStatus: " + status);
                            });

                        setTimeout(function () {
                            swal("Ajax request finished!");
                        }, 2000);
                    });
            });
        });
        </script>

HTML，动态输出部分:

    <?
    $sql = $wpdb->get_results("SELECT * FROM `xx` WHERE `user_id`='$toolbox_user_id'");
    foreach ($sql as $dbentry) {
        $lfzId = $dbentry->lfz_id;
        $sql2 = $wpdb->get_results("SELECT * FROM `xx` WHERE `id`='$lfzId'");
        foreach ($sql2 as $lfzdbentry) {
            $dbEntryId = $lfzdbentry->id;
            $lfzReg = $lfzdbentry->reg;
            $lfzManufacturer = $lfzdbentry->manufacturer;
            $lfzType = $lfzdbentry->type;
            $lfzHomebase = $lfzdbentry->homebase;
            ?>
            <tr>
                <td>##</td>
                <td><? echo "#".$dbEntryId." "; ?><? echo $lfzReg; ?></td>
                <td><? echo $lfzManufacturer." ".$lfzType; ?></td>
                <td>
                    <span class="tooltips" style="cursor: pointer;">
                        <a rel="tooltip" data-original-title="Dieses LFZ aus der Flotte entfernen">
                            <span style=" color: #A4C62D;"><i class="fa fa-minus-square"></i></span>
                        </a>
                    </span>
                   [...morespanswithfunctions...]
                </td>
            </tr>
            <?
        }
    }
    ?>

如何将 $dbEntryId 传递给 jQuery-Ajax-Call？ 谢谢。

Answer 1

选项 1

首先没有 <button>您想要click触发。所以你可以做如下: 在 html 中的某处添加一个按钮，例如:

<button class="delete" id="<? echo $dbEntryId; ?>">Delete</button> 

比在你的 jQuery 中:

$("button.delete").click(function () {
    var $this = $(this), // Pointing to the clicked element (a button in this case)
    $getTheValue = $this.attr('id');
    alert($getTheValue);

选项 2

在 html 编辑中:

<a rel="tooltip" data-original-title="Dieses LFZ aus der Flotte entfernen">
    <span style=" color: #A4C62D;"><i class="fa fa-minus-square"></i></span>
</a>

致:

<a class="delete" rel="tooltip" data-original-title="Dieses LFZ aus der Flotte entfernen" data-id="<? echo $dbEntryId; ?>">
    <span style=" color: #A4C62D;"><i class="fa fa-minus-square"></i></span>
</a>

然后在 jQuery 中

$("a.delete").click(function () {
        var $this = $(this), // Pointing to the clicked element (a button in this case)
        $getTheValue = $this.data('id');
        alert($getTheValue);

您还可以尝试将选项 2 添加到以下其中一项:span甚至在您的i icon上

希望这对您有所帮助。如果没有，请告诉我。