个人中心
gpt4 book ai didi

jquery - onClick 仅适用于表格中的第一个按钮

转载 作者：行者123 更新时间：2023-11-28 04:17:35 26 4
gpt4 key购买 nike

我正在尝试创建一个动态表，其中表中的每一行都有一个“修改”按钮，该按钮会弹出一个模式，其中将有一个请求信息的表单。

这是我当前的 CSHTML 代码:

<body>
    <div id="container">
        <h1>Fingerprint Tool</h1>
        <form id="userIdForm" method="post">
            Type in your UserId: <input name="userId" type="number" id="formUserId" />
            <input type="submit" />
        </form>

        @if (Model != null)
        {
            <h2>List of Fingerprints for user</h2>
            <div id="tableDiv">
                <table class="fingerprintTable">
                    <thead>
                        <tr>
                            <th>User ID</th>
                            <th>Fingerprint ID</th>
                            <th>FingerprintGrant ID</th>
                            <th>PaymentType ID</th>
                            <th>Fingerprint</th>
                            <th>IsDeleted</th>
                            <th>Status ID</th>
                            <th>Created Date</th>
                            <th>Updated Date</th>
                            <th>Modify</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var fingerprint in Model.Fingerprints)
                        {
                            <tr>
                                <td id="userId">@fingerprint.UserId</td>
                                <td id="fingerprintId">@fingerprint.FingerprintId</td>
                                <td id="fingerprintGrantId">@fingerprint.FingerprintGrantId</td>
                                <td id="paymentTypeId">@fingerprint.PaymentTypeId</td>
                                <td id="fingerprint">@fingerprint.Fingerprint</td>
                                <td id="isDeleted">@fingerprint.IsDeleted</td>
                                <td id="fingerprintStatusId">@fingerprint.FingerprintStatusId</td>
                                <td id="createdDate">@fingerprint.CreatedDate</td>
                                <td id="updatedDate">@fingerprint.UpdatedDate</td>
                                <td><button id="modifyButton" onclick="modifyFingerprintInfo(@fingerprint.FingerprintId);">Modify</button></td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>

            <div id="myModal" class="modal">

                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close">x</span>
                    <p id="modalHeader"></p>
                </div>

            </div>
        }
    </div>
</body>

这是我的 JS 文件:

    window.onload = function() {
        $(".modifyButton")
        .click(function() {
            modifyFingerprintInfo($(this).data("fpid"));
        });
    }

    function modifyFingerprintInfo(fingerprintId) {
    // call updateStatus hermes endpoint

    // Get the modal
    var modal = document.getElementById("myModal");
    // Get the button that opens the modal
    var btn = $(".modifyButton");
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    // When the user clicks on the button, open the modal 

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    }
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    }
    $("#modalHeader").text("Update the status of FingerprintId " + fingerprintId);

}

这是我的 CSS 代码:

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#container {
    width: 100%;
    position: absolute;
    left: 4px;
}

问题是，当我点击每一行的修改按钮时，第一次点击没有任何反应，然后第二次点击，但只针对第一行的第一个按钮。最重要的是，例如，如果我点击第 4 行修改按钮，什么也不会发生，但是当我点击第 1 行修改按钮时，它会打印出第 4 行的详细信息。

我不确定发生了什么，所以非常感谢任何帮助!

最佳答案

您可以使用 class 而不是 id 来标识多个元素。 id 属性旨在用于单个元素，如果多个元素具有相同的 id，则只会选择 1 个。

其次，您不希望在点击事件处理程序内部设置点击事件处理程序。让我们一次完成。

我看到你用 jQuery 标记了这个问题，所以你可以使用:

<button class="modifyButton" data-fpid="1111">Modify</button>

$(".modifyButton").click(function() {
    $("#modalHeader").text("Update the status of FingerprintId " + $(this).data("fpid");
    $("#myModal").show();
});

这表明通过使用 id，只有第一个会触发:

$("#button").click(function() {
  alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Clicked button ONE</button><br /><br />
<button id="button">Clicked button TWO</button><br /><br />
<button id="button">Clicked button THREE</button>

这表明通过使用 class，它们中的任何一个都会触发:

$(".button").click(function() {
  alert($(this).data("fpid"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-fpid="111">Clicked button ONE</button><br /><br />
<button class="button" data-fpid="222">Clicked button TWO</button><br /><br />
<button class="button" data-fpid="333">Clicked button THREE</button>

关于jquery - onClick 仅适用于表格中的第一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38175138/

26 4 0
文章推荐： html - UltraEdit 中的 XML 缩进
文章推荐： html - 如何测试在文本文档中编写的 HTML 代码？
文章推荐： c++ - 如何解决访问不同函数的 "nonstatic member reference must be relative to a specific object"
文章推荐： javascript - 单击事件处理程序在类更改后不工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com