jQuery - 点击事件触发多次

Question

我对 ASP.NET MVC 中的模态寡妇有一个奇怪的问题。我创建了一个负责显示模式窗口的链接。模态窗口显示并包含一个按钮 - 保存按钮。我在这个按钮上附加了一个点击事件处理程序，以便保存窗口的内容然后关闭它。整个机制看起来是这样的

// this link shows up a modal window 
 @Html.ActionLink("Add", "Add", "Index", null, new { id = "actionLinkAdd" });
and javaScript
$(function () {
        debugger;
        $("#actionLinkAdd").on("click", function (event, action) { // attaching to click event
            debugger;
            event.preventDefault(); //disabling default handler
            var $dialog = $('<div></div>');
            var $url = $(this).attr('href');
            $dialog.empty();
            var $kendoWindow = $dialog.kendoWindow({ //window creating
                height: "200px",
                title: "Dodaj",
                visible: false,
                width: "200px",
                actions: ["Close"],
                content: $url // loading of the window's content (partialView)

            }).data("kendoWindow");
            $kendoWindow.center();
            $kendoWindow.open();

            function onButtonSaveClick(event) { 
                debugger;
                event.preventDefault();
                var $url = $('#target').attr("action");
                $.ajax({
                    url: $url,
                    type: "POST",
                    data: $('#target').serialize(),
                    success: function (response) {
                        $("#btnSave").unbind("click");
                        $kendoWindow.close();
                        $kendoWindow.destroy();
                    },
                    error: function (args) {
                        debugger;
                        $("#btnSave").unbind("click");
                        $kendoWindow.content(args.responseText);                  
                    }
                });
            }
            $('#btnSave').live("click", onButtonSaveClick); // attaching to click event on     save button in the modal window
        });
    });

一切都很好。问题是函数 onButtonClick() 被触发了几次。例如，如果我打开模态窗口两次，这个函数也将被调用两次。这对我来说很奇怪，因为我关闭了模态窗口，销毁了它，甚至解除了绑定到 btnSave 的所有单击事件（我也尝试使用 on 和 off 功能，但窗口的行为是相同的）。这种行为可能是什么原因？

Answer 1

或者更好地移动绑定事件的行：

        }
        $('#btnSave').live("click", onButtonSaveClick);
    });
});

如下一行：

        }
    });
    $('#btnSave').live("click", onButtonSaveClick);
});

问题是您每次创建新对话框时都会调用 live，但无法使用“取消绑定”取消绑定。但是您不需要这样做，您只需在页面准备就绪时调用的最外层函数中使用 live 一次绑定，然后它将获取任何对 id = 'btnSave' 的任何点击。现在你真的不应该创建多个包含相同 id 元素的对话窗口，你真的应该将类设置为 'btnSave' 但那是另一回事了..

Answer 2

对于unbind live 事件处理程序使用die 方法。试试这个。

$("#btnSave").die("click");

.die()参考：http://api.jquery.com/die/

Answer 3

我发现，为了在模态窗口上进行验证，我在模态对话框中包含了一个包，如下所示：

@Scripts.Render("~/bundles/jqueryval")

我这样做是因为验证包仅在父页面上加载时验证失败。

我的 jqueryval 包包含三个文件：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*", // references two jquery libraries
                        "~/Scripts/jquery.validate*"));

我发现包含这个包会导致多次触发问题，大概是因为每次调用模态对话框时库都会加载并保留在内存中。当我删除捆绑包时，问题消失了，但验证也失败了。

经过大量的实验，我终于找到了解决方案；拆分捆绑包，将两个 jquery 库移动到父页面，将第三个库移动到模型对话框。具体...

父页面上的这两个：

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>

还有这个在模态对话框中：

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

通过分离包含，我不再有多次触发的问题，并且还保留了验证。