时间戳

首页 > 解决方案 > 如何获取动态创建的锚标签以重定向到操作方法

jquery - 如何获取动态创建的锚标签以重定向到操作方法

问题描述

我已将点击事件添加到动态创建的锚点。html 正确呈现，我正在点击 Jquery 事件函数。但是，服务器上的操作方法永远不会被命中。

我搜索了“动态创建的锚点不触发事件”。我已经尝试了我能理解的。事件被击中，但我不知道为什么 url 没有重定向到操作方法。Jquery 对我来说相当新。

我的 JQuery 用于创建锚点并根据锚点的类添加事件：

function BuildContent(data, contentarea) {
    contentarea.empty();
    //Build Data Rows
    $.each(data.users, function () {
        contentarea.append(
            "<tr>" +
            "<td data-title='Last Name'>" + this.lastName + "</td>" +
            "<td data-title='First Name'>" + this.firstName + "</td>" +
            "<td data-title='Company Name'>" + this.companyName + "</td>" +
            "<td data-title='Action'> <a class='edituser' ID='" + this.id + "'" +
            " asp-controller='Test' asp-action='EditUser' asp-route-id='" + this.id + "'>Edit</a> </td>" +
            "</tr>"
        );
    });
    contentarea.show();
    // Add click event to anchors
    $(".edituser").on("click", function (e) {
        alert(this.getAttribute('id'));
     });
}

这是页面上呈现的内容，我认为这是正确的：

<td data-title="Action"> <a class="edituser" id="d58b6399-f284-4fea-b350-73a0bf53a1bd" asp-controller="Test" asp-action="EditUser" asp-route-id="d58b6399-f284-4fea-b350-73a0bf53a1bd">Edit</a> </td>

这是浏览器页面显示的内容（我点击了另一个用户）：

<td data-title='Action'>
    <a href="/Test/EditUser/942fb374-cc46-4805-93cf-398cbc9d82af">Edit</a>
</td>

我只需要锚点跳回控制器中的操作并将 Id 作为参数传递。但同样，服务器上的操作方法永远不会被命中。没有错误消息。问题只发生在动态创建的 HTML 锚点上。

标签： jqueryhtmlmodel-view-controller

解决方案

这将对您有所帮助。

function BuildContent(data, contentarea) {
    contentarea.empty();
    //Build Data Rows
    $.each(data.users, function () {
        contentarea.append(
            "<tr>" +
            "<td data-title='Last Name'>" + this.lastName + "</td>" +
            "<td data-title='First Name'>" + this.firstName + "</td>" +
            "<td data-title='Company Name'>" + this.companyName + "</td>" +
            "<td data-title='Action'>  <a class='edituser' href='/Test/EditUser/" + this.id + "'>Edit</a> </td>" +
            "</tr>"
        );
    });
    contentarea.show();
    // Add click event to anchors
    $(".edituser").on("click", function (e) {
        alert(this.getAttribute('id'));
     });
}

推荐阅读