如何将动态创建的锚定标签重定向到动作方法



我添加了单击事件以动态创建锚点。HTML正确地呈现,我正在击中jQuery事件功能。但是,服务器上的操作方法永远不会被击中。

我已经搜索了"动态创建的锚定,而不是发射事件"。我已经尝试了我能理解的。这些事件被击中,但我不知道为什么URL没有重定向到动作方法。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锚点中发生。

这将对您有所帮助。

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'));
     });
}

最新更新