单击时为什么我的链接会调用错误的操作结果

Question

我有这个问题。我有编辑页面，其中一个属性是超链接。一个div显示我想要的视频列表如果我点击任何链接（例如“删除”）它将触发ajax调用以删除所选项目。不过我有奇怪的问题。每次我点击任何链接时，它都会调用“编辑”页面，这是当前页面而不是“删除”方法。我的链接以这种方式呈现。

<a href="#" class="video" id="@Model.VirtualTourGalleries[i].Virtual_Tour_Id">Delete</a>

请帮忙。这是我的代码。

HTML

<div class="fieldElem">
        <div class="editor-label">Virtual Tours & Videos</div>
        <div class="editor-field">  
            <table id="gridVirtualTours">
                <thead>
                    <tr>
                        <th>VIDEO</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.VirtualTourGalleries != null)
                    {
                        for(var i = 0; i < Model.VirtualTourGalleries.Count(); i++)
                        {
                            @Html.HiddenFor(model => model.VirtualTourGalleries[i].Virtual_Tour_Id)
                            <tr>
                                <td>@Model.VirtualTourGalleries[i].Virtual_Tour_Title</td>
                                <td><a href="#" class="video" id="@Model.VirtualTourGalleries[i].Virtual_Tour_Id">Delete</a></td>
                            </tr>

                        }
                    }
                </tbody>
                <tfoot>
                </tfoot>
            </table>

        </div>
    </div>

jQuery功能

$("#gridVirtualTours").on('click', '.video', function () {
            var tr = $(this).closest('tr');
            $.ajax({
                url: "deletevideo",
                type: 'POST',
                data: { videoid: $(this).attr('id') },
                success: function (result) {
                    if (result) tr.remove();
                }
            });
        });

控制器

[HttpPost]
        public ActionResult DeleteVideo(int? videoid)
        {
            return Json("", JsonRequestBehavior.AllowGet);
        }

调试图片

点击“删除”时，它会调用“编辑”而不是“删除”

Answer 1

更改代码如下：

$("#gridVirtualTours").on('click', '.video', function (e) {
            e.stopPropagation();
            var thisElement = $(this);
            var tr = $(this).closest('tr');
            $.ajax({
                url: "@Url.Action("DeleteVideo" , "Controller" , new {area ="area if it's not in base controller folder"})",
                type: 'POST',
                data: { videoid: thisElement.attr('id') },
                success: function (result) {
                    if (result) tr.remove();
                }
            });
        });

Answer 2

试试这个

url: '@Url.Action("DeleteVideo","ControllerName")',

而不是

url: "deletevideo",

Answer 3

在jquery ajax URL属性中使用正确的区分大小写的操作名称。即url: "DeleteVideo",