Javascript 从锚点标记的动态列表中向单击jquery事件传递参数

我正在处理asp.net mvc项目中的元素列表。每个元素都是

ul

的一部分，列表元素是基于我的模型中的列表生成的

我试图为这些元素中的每一个添加一个delete按钮，但我对如何使这些元素唯一化有点困惑，以便jquery稍后将正确的参数传递给我的操作

每个元素都有自己的guid，但我不知道如何将它们传递给（'click'）jquery处理程序。 以下是我的razor视图的相关部分：

<ul class="panel-tasks ui-sortable">
    @foreach (RunModel run in Model.PlannedRuns)
    {
        <li>
            <label>
                <i class="fa fa-edit"></i>
                <!--<i class="fa fa-ellipsis-v icon-dragtask"></i>-->
                <a href="@Url.Action("RunDetails", "Planning", new { runId = run.Id })"><span class="task-description">@run.Name</span></a>
                <span class="sl-task-details">@run.RunTask</span>
                <span class="sl-task-unit">@run.ConveyanceId</span>
                <span class="sl-task-location">@run.Operation.WellContract.Location, @run.Operation.WellContract.Name</span>
            </label>
            <div class="options">
                <a href="#" id="del" ><i class="fa fa-trash-o"></i></a>
            </div>
        </li>
    }
</ul>

@foreach（RunModel在Model.PlannedRuns中运行）
{

@run.RunTask
@run.transferanceId
@run.Operation.WellContract.Location，@run.Operation.WellContract.Name

}

下面是我的javascript：

<script type="text/javascript">
    $("#del").on("click", function (runId) {
            $.ajax({
                url: "@Url.Action("DeleteRun", "Planning")",
                type: "GET",
            dataType: "json",
            data: { runId: runId },
            error: function (msg) {
                // Error handling
            },
            success: function (msg) {
                // Success handling
            }
        });
    });
</script>

$（“#del”）。在（“单击”上，函数（runId）{
$.ajax({
url:“@url.Action”（“删除运行”、“计划”）”，
键入：“获取”，
数据类型：“json”，
数据：{runId:runId}，
错误：函数（msg）{
//错误处理
},
成功：功能（msg）{
//成功处理
}
});
});

---

我确实意识到我可以将

onClick

添加到作为参数传递id的锚定标记中，但我希望使用jquery可以做到这一点，如上文所述。另外，当几个html元素使用相同的方法时，是否有推荐的方法来执行此类任务？

您可以在单击事件（以及大多数事件）中使用$（this）访问单击的项目

并在HTML中插入id作为

data runId=

：

 <a href="#" class="del" data-rundId="@run.Id"><i class="fa fa-trash-o"></i></a>

---

正如

Rory McCrossan

所指出的，删除按钮上不应该有重复的

id

s（使用类）。Dupe ID实际上可以在大多数浏览器上工作，但被认为是一件坏事：）

您可以在特定于该实例的删除按钮上使用

数据-*

参数，然后单击即可检索该参数。您还需要使delete按钮使用

class

属性，否则它们将在循环中重复。试试这个：

<div class="options">
    <a href="#" class="del" data-runid="@run.Id"><i class="fa fa-trash-o"></i></a>
</div>

---

使用

data-

attributes的答案非常优雅，可以胜任这项工作。然而，我想提出一种（稍微）不同的方法：

@foreach (RunModel run in Model.PlannedRuns)
{
    <li id="@run.Id">
      ...........
    </li>
}   

此解决方案的优点：

您的

li

元素有一个id，其他JavaScript函数也可以使用该id

不需要玩弄属性（要小心，因为Firefox对

数据-

属性非常挑剔）

此外，delete

a

元素不会有重复的ID

---

在接受这个问题之前，只需要一个简短的问题。为什么删除按钮被复制很重要？每个元素都希望有自己的按钮。@元素的NicklasWinger复制很好，它是您不能复制的

id

属性值-

id

值在页面中必须是唯一的。啊，当然。可能有点误读了你的答案：）谢谢！没问题，很乐意帮助。请限定“

Firefox对数据属性非常挑剔”

？jQuery的全部目的是避免跨浏览器问题。

要小心，因为Firefox对数据属性非常挑剔

只要你遵循命名数据属性的指导原则（即所有小写），那么我会说这不是真的。@RoryMcCrossan我完全同意。但这是一个不用担心的条件。我完全支持

数据-

属性，但Firefox是唯一一款不“支持”大写字母完整语义的浏览器。请注意，这完全是我的观点。

<div class="options">
    <a href="#" class="del" data-runid="@run.Id"><i class="fa fa-trash-o"></i></a>
</div>

@foreach (RunModel run in Model.PlannedRuns)
{
    <li id="@run.Id">
      ...........
    </li>
}   

$(".del").on("click", function () {
    var runid = $(this).parent().id;
    //..............
});