Javascript 每次我点击一个链接在modal中打开一个窗口时，Ajax调用都会加倍

我有一个带有action列的表，列有按钮（link）来显示该行的详细信息

以下是显示每行按钮的代码

：rowid

将是实际的整数

<a data-path="http://example/rowdetails/:rowid" class="btn btn-info btn-xs load-ajax-modal" role="button" data-toggle="modal" data-target="#dynamic-modal">
    <span data-toggle="tooltip" title="Show Details">
        <span class="glyphicon glyphicon-eye-open"></span>
    </span>
</a>

问题 当我单击一行中的按钮时，这里的一切都很好，

one

single ajax（xhr）调用被执行。第二次单击同一url时，有两个ajax请求。第三次我点击一个按钮有四个、第四次点击八个等等，每次点击前一个数字都会翻倍

我在其他帖子中看到并尝试了.one（）.live（）.die（）等，但我想我可以找出这些函数的确切用法（我用$（'.load ajax modal'）尝试了这些函数，但似乎不起作用）

谢谢

---

K

这是因为您正在将单击添加到已存在的元素。最快的修复方法是在附加新操作之前关闭所有已注册的操作：

$（'.load ajax modal'）.off（'click'）.on（'click'，function（）{…

就像我说的，这只是一个解决办法，可以在对话框关闭时处理dom元素。

这是因为您正在将单击添加到现有元素。最快的修复方法是在附加新操作之前关闭所有已注册的操作：

$（'.load ajax modal'）。关闭（'click'）。打开（'click'，函数（）{…

就像我说的，这只是一个解决方法，可以在对话框关闭时处理dom元素。

每次Ajax请求完成时，您的ajaxComplete处理程序都会触发，每次单击按钮时，它都会添加一个新函数作为处理程序。因此，处理程序函数执行一次也就不足为奇了，然后两次，然后四次

您应该做的是使用事件委派

$(function onDocumentReady() {
    var $modal = $('#dynamic-modal');
    var $modalBody = $('.modal-body');
    var $window = $(window);

    $modal.on("show.bs.modal", function () {
        var height = $window.height() - 200;
        $(this).find(".modal-body").css("max-height", height);
    });


    $(document).on('click', '.load-ajax-modal', function (e) {
        url = $(this).data('path');
        //ajax call using load function
        $modalBody.load(url, function (result) {
            $modal.modal('show');
        });
    });
});

要记住几点：

如果多次使用jQuery对象（例如$（window）），请始终将其缓存在变量中。这确保jQuery不需要每次查找特定DOM元素时都查询DOM

请继续阅读。它确保即使在将元素动态添加到页面时也能执行事件处理程序。类似于jQuery.live（）提供的功能，但这一功能早已被弃用

---

ajaxComplete处理程序在每次Ajax请求完成时，以及每次单击按钮时添加一个新函数作为处理程序时都会触发。因此，处理程序函数执行一次、两次、四次也就不足为奇了

您应该做的是使用事件委派

$(function onDocumentReady() {
    var $modal = $('#dynamic-modal');
    var $modalBody = $('.modal-body');
    var $window = $(window);

    $modal.on("show.bs.modal", function () {
        var height = $window.height() - 200;
        $(this).find(".modal-body").css("max-height", height);
    });


    $(document).on('click', '.load-ajax-modal', function (e) {
        url = $(this).data('path');
        //ajax call using load function
        $modalBody.load(url, function (result) {
            $modal.modal('show');
        });
    });
});

要记住几点：

如果多次使用jQuery对象（例如$（window）），请始终将其缓存在变量中。这确保jQuery不需要每次查找特定DOM元素时都查询DOM

请继续阅读。它确保即使在将元素动态添加到页面时也能执行事件处理程序。类似于jQuery.live（）提供的功能，但这一功能早已被弃用

---

从处理程序中尝试

return false；

。如果不起作用，请尝试使用另一个事件加载该url的内容。单击很挑剔，因为引导程序也使用它。从处理程序中尝试

return false；

。如果不起作用，请尝试使用另一个事件加载该url的内容。单击很挑剔，因为引导程序也使用它也使用它。很好，这很有效。但是为什么你说这是解决办法，正确的方法是什么？当你打开模态窗口时，你正在创建一些DOM元素。只需在模态关闭时销毁它们。很好，这很有效。但是为什么你说这是解决办法，正确的方法是什么？当你打开模态窗口时您正在创建一些DOM元素。只需在模式关闭时销毁它们。我是否应该将其放在

$（文档）中。ajaxComplete（函数（）{

检查编辑的代码。您根本不需要ajaxComplete回调。此外，在模式HTML中也不需要“hide”类。只需使用引导程序提供的内容。当您调用$modal.modal（'show'）时，bootstrap将类“in”添加到显示它的模式中。这也确保了在显示模式时执行高度操纵脚本。很好，它起作用了。一个困惑是，

$（文档）。on（'click'，'load ajax modal'，function（e）{

不同于

$（'load ajax modal'）。on（'click'，function（）{

前者表示每当单击“.load ajax modal”元素时，即使将来会添加这样的元素，因此现在不在页面上，也要执行此函数。后者表示每当“.load ajax modal”元素单击页面上当前存在的元素，执行此函数。我已链接到一个页面，该页面描述了答案中的事件委派，我建议您仔细阅读并理解其基本概念。我是否应将其放入

$（文档）.ajaxComplete（函数（）{

检查已编辑的代码。您根本不需要ajaxComplete回调。此外，您也不需要模态HTML中的“隐藏”类。只需使用引导程序提供的内容。当您调用$modal.modal（'show'）时，bootstrap将类“in”添加到显示它的模式中。这也确保了在显示模式时执行高度操纵脚本。很好，它起作用了。一个困惑是，

$（文档）。on（'click'，'load ajax modal'，function（e）{

不同于

$（'load ajax modal'）。on（'click'，function（）{

前者表示每当单击“.load ajax modal”元素时，即使将来会添加这样的元素，因此现在不在页面上，也要执行此函数。后者表示每当“.load ajax modal”元素单击页面上当前存在的元素，执行此函数。我已链接到一个页面，该页面描述了答案中的事件委派，我建议您仔细阅读并理解

$(function onDocumentReady() {
    var $modal = $('#dynamic-modal');
    var $modalBody = $('.modal-body');
    var $window = $(window);

    $modal.on("show.bs.modal", function () {
        var height = $window.height() - 200;
        $(this).find(".modal-body").css("max-height", height);
    });


    $(document).on('click', '.load-ajax-modal', function (e) {
        url = $(this).data('path');
        //ajax call using load function
        $modalBody.load(url, function (result) {
            $modal.modal('show');
        });
    });
});