Question

我有以下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

等等。

是什么原因？

Answer 1

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

 $('#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,
                    });
    });

Answer 2

根据您提供的代码和信息，唯一合理的解释是，无论您从 AJAX请求中获取HTML代码，还会创建点击事件处理程序在同一元素#btn_goals上。最有可能的是，使用相同的代码。

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

Ajax将成功函数调用加倍

2 个答案: