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函数，但窗口的行为仍然相同）。这种行为的原因是什么？

- John

---

我认为事件冒泡是你的问题，btnSave是一个div还是href？ - kobe

阅读此链接，它应该解决问题 https://dev59.com/dHI_5IYBdhLWcg3wEe1u - kobe

@kobe 这是一个输入框 <input type="submit" id="btnSave" value="保存">。 - John

Answer 1

或者更好的方法是移动绑定事件的行：

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

向下移动一行，如下：

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

问题在于每次创建新对话框时，您都会调用'live'，但未使用'unbind'进行解绑。 但是实际上您不需要这样做，您只需在最外层函数中使用一次live绑定，在页面加载完成后调用它，然后它将适用于任何id ='btnSave'的点击事件。 现在，您不应该在多个具有相同id元素的对话框窗口中创建，而应该将类设置为“btnSave”，但这是另一个故事...

- James Ellis-Jones

Answer 2

使用die方法来解除live事件处理程序。尝试这个。

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

.die() reference: http://api.jquery.com/die/

- ShankarSangoli

Answer 3

我发现为了让模态窗口有效，我需要在模态对话框中包含一个软件包，如下所示：

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

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

我的jqueryval包含三个文件：

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

我发现包含这个bundle会导致多次触发的问题，可能是因为每次调用模态对话框时库都会加载并保留在内存中。当我删除bundle时，问题消失了，但验证也无法进行。

经过大量实验，我终于找到了解决方法：将bundle拆分，将两个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>

将includes分开后，我再也没有多次触发的问题，并且保留了验证。

- spadelives

---

你的回答有些令人困惑...它写得好像你是楼主...如果是这样，那么它不是同一个用户账户。 - Sparky