Ajax 将成功函数的调用加倍

Ajax doubles calls to success function

本文关键字：调用 函数 成功 Ajax      更新时间：2023-09-26

我有以下js代码：

$('#btn_goals').on('click', function () {
    $.ajax({
        url: '/Goals/Index',
        success: function (data) {
            $('#region_content').html(data);
            console.log("goals fires");
        }
    });
});
它在某些按钮单击时触发

并且工作完美，除了一件奇怪的事情：它在第一个按钮单击时触发一次，在第二个按钮单击时触发两次，在第三次按钮单击时触发四倍，依此类推。

这是谷歌控制台输出：

1st click:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
content loaded  myscript-002.js:8
2nd click:
content loaded  myscript-002.js:8
content loaded  VM43:8
3rd click:
content loaded  myscript-002.js:8
content loaded  VM43:8
content loaded  VM43:8
content loaded  VM43:8

等等。

原因是什么？

根据您提供的代码和信息，唯一合理的解释是，无论您从 AJAX 请求中以 HTML 代码返回什么，都会在相同的元素#btn_goals上创建一个 click 事件处理程序。最有可能的是，使用相同的代码。

因此，请检查请求的结果并在必要时修复它。

如果问题是多次注册同一事件，请使用这个..

 $('#btn_goals').off('click');
 $('#btn_goals').on('click', function () {
        $.ajax({
            url: '/Goals/Index',
            success: function (data) {
                $('#region_content').html(data);
                console.log("goals fires");
            }
        });
    });

off()方法清除使用 on（） 方法附加的上一个事件。

第二种方法 #updated

       $(document).off("userDistinctData");
        $(document).on("userDistinctData", function (e) {    
        performAjaxCall();
        }
        );
     var performDataCall = function () {
       $.ajax({
            url: '/Goals/Index',
            success: function (data) {
                $('#region_content').html(data);
                console.log("goals fires");
            }
        });
     };
 $('#btn_goals').off('click');
 $('#btn_goals').on('click', function () {
   $(document).trigger({
                        type: "userDistinctData",
                        cData: data,
                    });
    });
相关文章：