javascript - JQuery Click 处理程序仅适用于第一个项目

Question

对于我正在制作的表格，我必须制作一些能够更改数据库中每一行的值的东西。问题是我现在的情况只影响表中的tr，而不影响其他tr。

我正在使用 Flight (MVC)，这是我的代码: View :

<tbody>
<?php foreach($this->objarrAll as $key => $value){ ?>
<tr>
    <td><?= $value['category']; ?></td>
    <td><?= $value['user_send']; ?></td>
    <td><?= $value['points']; ?></td>
    <td><a href="javascript:void(0)" data-toggle="modal"
           data-target="#modal-view-<?= $value['id']; ?>">Bekijken</button></td>
    <div id="modal-view-<?= $value['id']; ?>" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Inzending van <?= $value['user_send']; ?></h4>
                </div>
                <div class="modal-body">
                    <p><img width="868px"
                            src="#">
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="uid" value="<?= $value['user_send']; ?>"/>
    <input type="hidden" id="points" value="<?= $value['points']; ?>"/>
    <input type="hidden" id="row_id" value="<?= $value['id']; ?>"/>
    <td><a class="submitPoints" href="javascript:void(0)">Geef punten</a></td>
</tr>
<?php } ?>
</tbody>

Javascript/AJAX 代码:

$(".submitPoints").on("click", function () {

    var uid = $('#uid').val();
    var points = $('#points').val();
    var row_id = $('#row_id').val();

    var data = {
        uid: uid,
        points: points,
        row_id: row_id
    };

    $.ajax({
        type: "POST",
        url: "/update/user/points",
        async: true,
        data: data,
        success: function (data) {
            console.log("De " + points + " punten zijn toegekend aan " + uid + "");
            var err = jQuery.parseJSON(data);
            sendAlert.createAlert(err.return, err.type);
            $("#check-view").load("/admin/table/check/all", function () {
            });
        }
    });


});

模型和 Controller 工作正常，因为正在执行 SQL 查询。

Answer 1

首先将你的 id 更改为类

<input type="hidden" class="uid" value="<?= $value['user_send']; ?>"/>
<input type="hidden" class="points" value="<?= $value['points']; ?>"/>
<input type="hidden" class="row_id" value="<?= $value['id']; ?>"/>

第二次在你的 tr 上添加一个类

<tr class="row">

然后将您的绑定(bind)更改为上下文查找。

$(".submitPoints").on("click", function (e) {
    var $row = $(e.target).closest('.row');
    var uid = $row.find('.uid').val();
    var points = $row.find('.points').val();
    var row_id = $row.find('.row_id').val();

您可以选择使用数据元素，而完全忘记隐藏字段。

<td><a class="submitPoints" href="javascript:void(0)" data-uid="<?= $value['user_send']; ?>" data-points="<?= $value['points']; ?>" data-rowid="<?= $value['id']; ?>">Geef punten</a></td>

在这种情况下，您的事件处理程序将是...

$(".submitPoints").on("click", function (e) {
    var $submit = $(e.target);
    var uid = $submit.data('uid');
    var points = $submit.data('points');
    var row_id = $submit.data('rowid');