无法从 jQuery 单击函数中的元素获取自定义属性

Question

我正在使用 Bootstrap、EJS、jQuery 和 Express.js 为我正在做的一个小项目快速构建一个网站，这涉及到我需要能够从具有特定 ID （在下面的代码中显示为“违规”）

的数据库中删除某些内容

我正在使用点击事件删除违规（如下所示）并使用自定义属性获取违规 ID 并将其传递到我的 jQuery 请求中。

JavaScript点击函数：

$('.deleteButton').click(() => {


                $('#confirmDeleteSingleInfractionModal').modal('toggle');
                console.log($(this).attr('referencedInfraction'))
                $('#confirmDeleteSingleInfractionModal').on('hide.bs.modal', function (event) {


                    // $.ajax({
                    //     type: 'delete',
                    //     url: `${window.location.origin}/dataLink/infraction`,
                    //     data: {
                    //         infractionID,
                    //         targetUserID
                    //     },
                    //     success: () => {
                    //        //Do something when complete
                    //     },
                    //     error: () => {
                    //         showInfractionDeleteError();
                    //     }
                    // })

                })
            });

每个“违规”都列在 table 中。我的按钮的代码如下（标记有问题的按钮）

<table class="table" style="table-layout: fixed">
                                    <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">Infraction ID</th>
                                        <th scope="col">Date</th>
                                        <th scope="col">Moderator</th>
                                        <th scope="col">Reason</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <% userInfo.infractions.forEach(i => { %>
                                        <tr>
                                            <th scope="row">
                                                <% if (i.type.toLowerCase() === 'mute') {%>
                                                    <!--Yellow-->
                                                    <span class="badge bg-warning text-dark"><%= i.type.toLowerCase() %></span>
                                                <% } else if (i.type.toLowerCase() === 'kick') {%>
                                                    <!--                    red-->
                                                    <span class="badge bg-danger"><%= i.type.toLowerCase() %></span>
                                                <% } else if (i.type.toLowerCase() === 'warn') {%>
                                                    <!--                    green-->
                                                    <span class="badge bg-success text-dark"><%= i.type.toLowerCase() %></span>
                                                <% } else if (i.type.toLowerCase() === 'ban') {%>
                                                    <!--                    red-->
                                                    <span class="badge bg-danger text-white"><%= i.type.toLowerCase() %></span>
                                                <% } else { %>
                                                    <span class="badge bg-secondary text-white"><%= i.type.toLowerCase() %></span>
                                                <% }%>
                                                <%= i.infractionID %>
                                            </th>
                                            <td><%= i.dateIssued %></td>
                                            <td><%= i.responsibleModerator %></td>
                                            <td><%= i.reason %></td>
                                            <td>
                                               <!--This is the button in question   -->      <button referencedInfraction="<%= i.infractionID %>" class="deleteButton btn btn-danger">
                                                    <svg xmlns="http://www.w3.org/2000/svg" id="<%= i.infractionID %>" width="20" height="20" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                                    </svg>
                                                </button>
                                            </td>
                                        </tr>
                                    <% }) %>
                                    </tbody>
                                    <button type="button" style="margin: 10px" onclick="alert('You do not have the required permissions to execute this')" class="btn btn-danger">
                                        <i class="bi bi-exclamation-triangle-fill"></i> Issue Infraction
                                    </button>
                                    <button type="button" style="margin: 10px" onclick="showConfirmModal()" class="btn btn-warning">
                                        <i class="bi bi-file-x-fill"></i>
                                        Clear Infractions
                                    </button>
                                </table>

我只是想通过 .attr() 获取自定义属性，但它只是在我的控制台中返回未定义。

如果有人能提供帮助，我们将不胜感激！

Answer 1

您可以使用$(event.target)访问调用了点击事件的元素，然后使用相同的方法获取属性值。

演示代码 :

$('.deleteButton').click((event) => {
  console.log($(event.target).attr('referencedInfraction'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" style="table-layout: fixed">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Infraction ID</th>
      <th scope="col">Date</th>
      <th scope="col">Moderator</th>
      <th scope="col">Reason</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th scope="row">
        1
      </th>
      <td>
        12/2.
      </td>
      <td>
        avcvc
      </td>
      <td>
        soemthind..
      </td>
      <td>
        <button referencedInfraction="1" class="deleteButton btn btn-danger">soemthing </button>
      </td>
    </tr>
    <tr>
      <th scope="row">
        2
      </th>
      <td>
        12/2.
      </td>
      <td>
        avcvc
      </td>
      <td>
        soemthind..
      </td>
      <td>
        <button referencedInfraction="2" class="deleteButton btn btn-danger">soemthing </button>
      </td>
    </tr>

  </tbody>
</table>

无法从 jQuery 单击函数中的元素获取自定义属性

Unable to get custom attribute from element in jQuery click function

html

jquery

ejs

twitter-bootstrap