Question

我正在研究asp.net mvc项目中的元素列表。每个元素都是ul的一部分，列表元素是根据模型中的列表生成的。

我正在尝试为这些元素中的每一个添加一个删除按钮，但是我对如何使这些元素变得独特感到困惑，因为jquery稍后会将正确的参数传递给我的动作。

每个元素都有自己的guid，但我无法弄清楚如何将它们传递给.on('click') jquery处理程序。这是我剃刀观点的相关部分：

<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>

这是我的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>

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

Answer 1

您可以在特定于该实例的删除按钮上使用data-*参数，然后您可以在单击时检索该参数。您还需要使删除按钮使用class属性，否则它们将在循环中重复。试试这个：

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

$(".del").on("click", function (e) {
    e.preventDefault();
    var runid = $(this).data('runid');
    $.ajax({
        url: "@Url.Action("DeleteRun", "Planning")",
        type: "GET",
        dataType: "json",
        data: { runId: runId },
        error: function (msg) {
            // Error handling
        },
        success: function (msg) {
            // Success handling
        }
    });
});

Answer 2

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

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

并在HTML中插入ID为data-runId=：

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

由于删除按钮仅为boookmark（＃），因此它可能具有的唯一效果是将页面移动到顶部。要停止添加事件参数并在其上调用preventdefault()。（或者只是从事件处理程序返回false）。

$(".del").on("click", function (e) {
      e.preventDefault();

正如Rory McCrossan指出的那样，你的删除按钮（使用一个类）不应该有id个重复。 Dupe ID实际上适用于大多数浏览器，但被认为是一件坏事：）

Answer 3

使用data-属性的答案很优雅，可以胜任。但是，我想提出一个（稍微）不同的方法：

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

在a元素中，将您的del ID设置为类。

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

此解决方案的优点：

您的li个元素的ID也可以被其他JavaScript函数使用
无需使用属性（小心，因为Firefox对data-属性非常挑剔）
此外，您的删除a元素不会有重复的ID。

将参数传递给on来点击动态锚标记列表中的jquery事件

3 个答案: