javascript - 如何进行 AJAX 调用，使其仅在我单击特定类中包含的链接时触发，并包含父元素的“id”？

Question

我在网页上有以下内容：

<td class="containslink" id=1>
    <a href=/ControllerX/ActionY/7>View</a>
</td>

上面有很多版本，每个版本都有不同的 id。

单击包含的链接时，我需要该页面触发对以下地址的 AJAX 调用：

/Controller/Action/1

或者

@Url.Action("Action", "Controller" new { id = 1 })

whereid等于td的 id。

---

如果我像这样对我的 AJAX 调用进行硬编码：

myUrl = @Url.Action("Action", "Controller" new { id = 1});

$(document).ready(function () {
    $("a").click(function(){
        $.ajax({
            url: myUrl,
        });
    });
});

AJAX 调用在我单击页面上的任何链接时触发，并且总是以id1 触发（显然）。

我将如何更改此 AJAX 调用，以便它仅在我单击 a td classof中包含的链接时才起作用"containsLink"，并且包括包含被单击链接id的 the td？

Answer 1

您需要收紧选择器（不要只选择所有<a>元素）并在事件处理程序中获取 ID。

$(document).ready(function () {
    $("td.containslink a").click(function(){
        var id = $(this).closest("td.containslink").attr("id");
        $.ajax({
            url: "/Controller/Action/" + id
        });
    });
});

请注意，这1是一个无效的 ID，因为它以数字开头。您可能想改用data-属性，例如data-id.

Answer 2

尝试这个：

$(document).ready(function () {
    $("td.containsLink > a").click(function(){
        var tdId = $(this).parent("td.containsLink").attr("id");
        // do what ever you need to do with td value here
        $.ajax({
            url: myUrl,
        });
    });
});