为什么点击第二个链接会重定向到部分页面而不是对话框

Question

我有一个编辑局部视图需要在对话框中加载，第一次调用时可以工作，编辑后保存数据，很好。

然而，如果您不刷新页面（我不想这样做），再次点击“编辑”，您将被重定向到我尝试加载的局部页面。

看起来 AJAX 被忽略了，控制器中的操作方法被调用了。

我已经通过布局页中的包捆添加了非侵入式 JavaScript 库（main 视图使用它，局部视图不需要使用），但我认为它不需要。

我还尝试过使用 preventDefault 和不同的 return false; 方法，但都没有成功，例如下面的方法：

editBtn.click(function (e) {
            editDialogPlaceholder.load(this.href, function () {
                e.preventDefault(); //tried
                $(this).dialog('open');
                return false; //tried
            })
        return false;
    });

我该如何停止这个操作？

AJAX/JS

$(function () {
        var editBtn = $('.editLink');
        var editDialogPlaceholder = $('#editDialogUI');

        editBtn.button();
        // build the dialog form
        editDialogPlaceholder.dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            open: function (event, ui) {
                $(this).load('@Url.Action("Edit","Announcements")');
            },
            buttons: {
                "Save": function () {
                    saveAnnouncement();
                    fetchList();
                    $(this).dialog("close");
                },
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        // on click load the dialog form, return false to stop redirect
        editBtn.click(function () {
            editDialogPlaceholder.load(this.href, function () {
                $(this).dialog('open');
            })
            return false;
        });
    });
    //post data back to the controller to save to the db
    function saveAnnouncement() {
        $.ajax({
            url: '@Url.Action("Edit","Announcements")',
                type: 'POST',
                data: $('form').serialize()
            })
        }

        function fetchList() {
            var aList = $('#announcementList');
            aList.load('@Url.Action("Fetch")');
        }

编辑操作方法

[HttpGet]
        public ActionResult Edit(int id)
        {
                var announcementModel = (from a in db.DbAnnouncement
                           where a.Id == id
                           select a).SingleOrDefault();
                return PartialView("Edit", announcementModel);
        }

使用Html.ActionLinks打开对话框-第二次单击后，将重定向到控制器中指定的部分。

<div class="announcementTableCell">
                    @Html.ActionLink("Edit", "Edit", new { id = Model[i].Id }, new { @class = "editLink" })

                    @Html.ActionLink("Delete", "Delete", new { Model[i].Id }, new { @class = "dltLink" })
                </div>

- PurpleSmurph

---

只要您从不替换原始链接。但如果您像那个答案中使用委托，它实际上并不需要更多的代码。 - Jasen

好的 - 谢谢 - 快速尝试未能使用 .on - editBtn.on("click", editBtn, function () { editDialogPlaceholder.load(this.href, function () { $(this).dialog('open'); }) return false; }); - PurpleSmurph

你的按钮点击事件只被调用了一次。第二次被触发的是你的 @html.ActionLink("Edit")... - wahwahwah

еә”иҜҘжҳҜ $(document).on('click', '.editBtn', function(){ //..load stuff..// });пјҢе…¶дёӯ $(document) еҸҜд»ҘжҳҜд»»дҪ• .editBtn зҡ„йқҷжҖҒзҲ¶е…ғзҙ гҖӮ - wahwahwah

你仍然绑定到动态目标 editBtn.on()。应该是 $("parent_selector").on("click", ".editLink", function(e) { e.preventDefault(); }。 - Jasen

Answer 1

在评论中提出的解决方案是使用 jQuery.fn.on 来处理点击按钮，因为此时页面没有被刷新，所以绑定到一个静态元素而不是被刷新的元素，这意味着操作方法被调用并且重定向到部分视图。

因此，可行的按钮点击代码如下：

$('#announcementList').on("click", ".editLink", function () {
            editDialogPlaceholder.load(this.href, function () {
                $(this).dialog('open');
            })
            return false;
        });

- PurpleSmurph